流星事件只与第一个元素绑定

Question

我很难理解Meteor如何将事件绑定添加到模板中。

我有一个模板，导航下拉菜单有多个锚。

<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'选择器匹配的模板。

同样的问题也发生在包含从集合衍生的动态元素的模板上。 我只是假设Meteor模板事件方法的工作方式会和以下方法一样 $('a.dropdown.menu').on(...

我怀疑这是与Meteor在事件绑定之前没有渲染所有模板的DOM元素有关。 我见过使用Meteor的解决方案。模板.rendered来绑定渲染后的事件，但考虑到Meteor在下个版本中会取消rendered方法，这似乎很混乱。

有其他方法吗？

Answer 1

不，事件处理程序是为模板指定的，而不是 "绑定 "到元素上。所以，如果任何一个锚元素的类是 dropdown-toggle 被点击。

您所遇到的问题可能是由于使用了 e.target 而不是 e.currentTarget 在你的事件处理程序中。从Meteor文档中。

目标

发起事件的元素。

当前目标

当前处理事件的元素。 这是事件图中与选择器相匹配的元素，对于冒泡的事件，它可能是target或target的祖先，它的值会随着事件的冒泡而改变。对于冒泡的事件，它可能是target或target的祖先，其值会随着事件的冒泡而改变。

在第一种情况下，这两个 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()
  }
});

关于你的第二个动态元素的问题： 你能提供一个例子吗？