流星事件仅与第一个元素结合

Question

我正在努力了解流星如何将事件绑定到模板中。

我有一个模板，带有多个锚定为导航下拉列表：

<template name="user_loggedin">
  <li  class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Select a profile..
    <b class="caret"></b></a>
    <ul class="dropdown-menu">List</ul>
  </li>
  <li  class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
      <i class="glyphicon glyphicon-cog"></i>
      <b class="caret"></b></a>
      <ul class="dropdown-menu"> </ul>
    </li>
</template>

我尝试绑定点击事件以显示下拉菜单：

Template.user_loggedin.events({
  "click a.dropdown-toggle": function(e,tml) {
  $(e.target).siblings('.dropdown-menu').toggle()
  }
})

但是，该事件似乎仅绑定到第一个锚元素，并不是所有与'a.dropdown-toggle'selector匹配的

对于包含从集合中得出的动态元素的模板发生了相同的问题。我刚刚以为流星模板事件方法将以与$('a.dropdown.menu').on(...

相同的方式工作

我怀疑这是关于在事件绑定之前没有渲染所有模板的DOM元素的流星。我已经看到了使用Meteor的解决方案。模板。渲染后施用了绑定事件，但是考虑到流星在下一个版本中正在贬低渲染方法，这似乎是混乱的。

有其他方法吗？

Answer 1

no。事件处理程序是为模板指定的，而不是"绑定"到元素。因此，如果单击具有dropdown-toggle类的任何锚点元素，您的活动处理程序肯定会执行。

您遇到的问题可能是由于在活动处理程序中使用e.target而不是e.currentTarget引起的。来自流星文档：

目标

起源于事件的元素

CurrentTarget

当前处理活动的元素。 这是与事件映射中选择器相匹配的元素。为了 气泡的事件，可能是目标的目标或祖先 随着事件气泡而变化。

在第一种情况下，e.target和e.currentTarget都是a.dropdown-toggle，一切都按预期工作。但是，在第二种情况下，e.target是i.glyphicon.glyphicon-cog，而e.currentTarget是a.dropdown-toggle（这是您想要的）。

所以请尝试编辑您的活动处理程序，以使其看起来像：

Template.user_loggedin.events({
  "click a.dropdown-toggle": function(e,tml) {
      $(e.currentTarget).siblings('.dropdown-menu').toggle()
  }
});

关于动态元素的第二个问题：您可以提供示例吗？