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

【问题标题】：In Meteor, how do I attach a Template Event to a dynamically inserted element?在 Meteor 中，如何将模板事件附加到动态插入的元素？
【发布时间】：2015-01-26 14:20:51
【问题描述】：

我有一个 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 元素的事实有关......但是经过大量绝望的谷歌搜索后，我无法找到如何（甚至是否）我可以将模板事件处理程序附加到动态插入的 HTML 元素。

我确定我在这里做错了什么（或很多事情），所以任何帮助或正确方向的点都将不胜感激。：）谢谢！

【问题讨论】：

标签： javascript meteor

【解决方案1】：

从您的代码看来，添加的mask div 并未添加到具有"click .mask" 事件函数的模板dGlobalNav 中。它被添加到 body 标记中。因此它不会着火。我不确定你想要它在哪里，但如果你将它添加到模板内的 div 中，它会触发。

我已经在模板dGlobalNav HTML 中添加了这个 div。

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

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

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

如果您还没有删除它，您将可以使用 jQuery。

【讨论】：

啊！你说得对，问题是 .mask div 不在 dGlobalNav 模板中……非常感谢！