Why does my jQuery work in Meteor's onRendered but not in the events?

Question

I have a hamburger that animates when you click on it. I am able to successfully make it work if I place it in the onRendered section but it will not work in the events section. The hamburger becomes unresponsive if I try to run the code in Template.events.

onRendered Code

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);
    });
});

events code

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是您出错的地方......

在Meteor onRendered回调中，this指的是模板实例，而事件this指的是触发事件的元素的数据上下文。因此，this根据其使用位置而有所不同。

但是你的进一步复杂性是onRendered回调中的this在jquery事件处理程序中，因此在该上下文中它引用了DOM元素，而不是模板实例 - 这就是它实际工作的原因。 （这是一般的javascript，而不是Meteor特定的。请参阅here）

为了清晰（和理智），我尽量避免使用this并尝试更加明确 - 因此您只需将$(this)替换为$(".hamburger")