流星事件仅绑定到第一个元素答案

【问题标题】：Meteor events only binding to first element流星事件仅绑定到第一个元素
【发布时间】：2020-05-22 01:52:21
【问题描述】：

我很难理解 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.template.rendered 在渲染后绑定事件的解决方案，但考虑到 Meteor 在下一个版本中不推荐使用渲染方法，这似乎很混乱。

还有其他方法吗？

【问题讨论】：

标签： javascript meteor event-handling dom-events

【解决方案1】：

没有。事件处理程序是为模板指定的，并且没有“绑定”到元素。因此，如果单击任何具有 dropdown-toggle 类的锚元素，您的事件处理程序肯定会被执行。

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

目标

发起事件的元素。

当前目标

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

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

关于动态元素的第二个问题：您能举个例子吗？

【讨论】：