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

In Meteor, how do I attach a Template Event to a dynamically inserted element?

本文关键字：动态 插入 元素 事件 Meteor      更新时间：2023-09-26

>我有一个流星模板事件，我在单击时插入了一个<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 元素。

我

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

从代码的外观来看，添加的 maskdiv 不会添加到具有 "click .mask" 事件函数的模板dGlobalNav中。它被添加到正文标签中。因此它不会开火。我不确定您想要它的位置，但是如果您将其添加到模板内的div中，它将触发。

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

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

然后我使用 jQuery 将掩码div 添加到这个div 中。

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

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

相关文章：