Question

我有一个Meteor模板事件，我点击<div class="mask"></div>点击...

Template.dGlobalNav.events({

    "click .toggle-slide-left": function() {
      var mask = document.createElement("div");
      mask.className = "mask";

      $("body").addClass("sml-open");
      document.body.appendChild(mask);
      Session.set("activeNav", "sml-open");
    },

...我希望将另一个点击事件附加到此<div class="mask"></div> ...

"click .mask": function() {
  $("body").removeClass(Session.get("activeNav"));
  Session.set("activeNav", "");
  $(".mask").remove();
}

这一切都让我不知所措：

Template.dGlobalNav.events({

"click .toggle-slide-left": function() {
  var mask = document.createElement("div");
  mask.className = "mask";

  $("body").addClass("sml-open");
  document.body.appendChild(mask);
  Session.set("activeNav", "sml-open");
},

"click .mask": function() {
  $("body").removeClass(Session.get("activeNav"));
  Session.set("activeNav", "");
  $(".mask").remove();
}

}）;

然而，似乎"click .mask"功能根本没有发射。我怀疑这与第一次单击事件处理程序首先生成.mask元素这一事实有关...但经过大量绝望的谷歌搜索之后，我无法找到它（或者甚至是否）我可以将Template事件处理程序附加到动态插入的HTML元素中。

我确定我在这里犯了一些错误（或许多事情），所以任何帮助或指向正确方向的人都会非常感激。：）谢谢！

Answer 1

根据您的代码外观，添加的mask div不会添加到其中包含dGlobalNav事件函数的模板"click .mask"中。它被添加到body标签中。因此它不会开火。我不确定你想要它在哪里，但是如果你将它添加到模板内的div中它将会触发。

我已在模板dGlobalNav HTML中添加了此div。

<div id="test"></div>

然后我用jQuery将mask div添加到这个div中。

//document.body.appendChild(mask);
$(mask).appendTo("#test");

如果你没有删除它，你将有jQuery可用。

在Meteor中，如何将模板事件附加到动态插入的元素？

1 个答案: