Question

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

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

我将click事件附加到“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）。我相信这是因为该行位于正在“屈服”的子模板中。

如何让索引模板将'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
}

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

1 个答案: