子模板中的流星目标元素并传递给全局函数

Question

我正在尝试创建一个全局函数，用于在单击 'tr' 元素外部时删除 "selected" class。但是，我使用的事件没有注册正确的目标元素，因为该元素位于子模板中。这是我的模板代码。

<template name="index">
        {{> header}}
        {{> navigation }}
        <section id="section-main" class="container">
            {{> yield}}
        </section>
        {{> footer}}
    </section>
</template>

我将点击事件附加到 "index" 模板。这是事件代码，函数 "deselectRow" 被调用...

Template.index.events({
    // Event: Click anywhere to deselect row
    "click": function (e) {
        // console message
        // console.log("you clicked a DOM element");
        deselectRow(e);

    }
});

接着是函数本身，其中根据我希望成为的当前目标检查事件 'tr'...

// DESELECT Row
    deselectRow = function (e) {

        // Event: Click anywhere outside a table row element and remove selected class from tr
        if (e.currentTarget != $('tr')) {
            $('tr').removeClass('selected');
            console.log('you clicked outside a table row element')
        }
        else {
            console.log('you clicked a table row element')
        }
    };

我的理解是，当单击该行时，"index" 模板的事件处理程序未注册我已单击该行（即：将其用作 currentTarget）。我相信这是因为该行位于 "yielded" 的子模板中。

如何让索引模板将 'tr' 识别为 currentTarget？

P.S。我是 javascript 和 meteor 的新手。感谢您的耐心等待，如果我正在使用常用术语或询问一些我自己应该很容易解决的问题。

Answer 1

将活动附加到 <tr> 并点击：

'click tr': function(ev){
  var currentRow = ev.target;
  $('tr').removeClass('selected'); // deselect any previously selected rows
  currentRow.addClass('selected'); // select the one just clicked on
}

子模板中的流星目标元素并传递给全局函数

Meteor target element in child template and pass to global function

javascript

jquery

templates

meteor

meteor-blaze