為什么我的jQuery在Meteor的onRendered上起作用，但在事件中卻不起作用？

Question

我有一個漢堡，當您單擊它時會發出動畫。 如果將其放在onRendered部分中，則能夠成功使其工作，但在事件部分中將無法工作。 如果我嘗試在Template.events中運行代碼，則漢堡包將無響應。

onRendered代碼

Template.Top_navbar.onRendered(function () {
 var $hamburger = $(".hamburger");

    $hamburger.on("click", function(e) {
        $hamburger.toggleClass("is-active");
        event.preventDefault();
        var el = $(this);
        el.prop('disabled', true);
        setTimeout(function(){el.prop('disabled', false); }, 300);
    });
});

事件代碼

Template.Top_navbar.events({
    'click .hamburger': function (event) {
        $(".hamburger").toggleClass("is-active");
        event.preventDefault();
        var el = $(this);
        el.prop('disabled', true);
        setTimeout(function(){el.prop('disabled', false); }, 300);
    },
});

Answer 1

this就是你要去的地方...

在流星onRendered回調， this指的是模板實例，並在活動this是指觸發事件的元素的數據上下文。 因此， this取決於使用位置。

但是，進一步的麻煩是，onRendered回調中的this在jquery事件處理程序內部，因此在這種情況下，它引用DOM元素，而不是模板實例-這就是它實際上起作用的原因。 （這是常規javascript，而不是流星特定的。請參見此處 ）

為了清楚（和理智），我盡量避免this ，並嘗試更加明確-因此您可以將$(this)替換$(this) $(".hamburger")