多个流星元素上的 jQuery 事件触发

Question

所以我有一个包含在 Bootstrap 弹出框中的按钮，其中多个元素附加了相同的弹出框。您可以查看我的MeteorPad here（单击弹出框的每个元素）。

每当您单击弹出框内的按钮时，它都会触发所有弹出框，因此在我的示例中，您将收到 3 个警报。如果我添加第四个元素，我会得到 4，等等。

这可能是由于弹出框必须使用 jQuery .on() 来处理事件，因为它是动态创建的。这意味着我必须在 Meteor 中使用 Template.name.rendered 而不是 Template.name.events。

Template.postItem.rendered = function() {
 var data = Template.instance().data;
  $(".newNumber").popover({
    html: true,
    title: 'Popover',
    content: function() {
        return $("#popover-content").html();
    }
  }); 
  $(document).on('click','#mysubmit', function(e) {
    e.preventDefault();  
    alert('Hey');
  });
}

有没有办法将 jQuery .on() 绑定到 Meteor 中的特定元素，这样我就不会触发所有元素？如果我静态构建这个例子，一切都很好，所以我有点困惑。

Answer 1

我实际上并不能 100% 确定为什么会发生这种情况，但我相信您正在对所有 .newNumber 元素运行 popover 函数每个时间你呈现一个帖子项目。我想你只想做一次。

有很多方法可以解决这个问题，但在您的情况下，最快和最简单的方法是仅在刚刚呈现的模板中的 .newNumber 实例上运行它。这可以通过使用template.$ selector 来完成，它只选择作为给定模板实例成员的元素，如下所示：

Template.postItem.rendered = function() {
  var data = Template.instance().data;
    Template.instance().$(".newNumber").popover({
        html: true,
        title: 'Popover',
        content: function() {
            return $("#popover-content").html();
        }
    }); 

}

您可以在this Meteorpad. 中查看该修复程序