如何仅使用jQuery将事件处理程序附加到新添加的元素？

Question

有些物品我附加了一些事件。 在某些时候，我创建了更多这些项目，我希望它们也可以附加到相同的事件上。

如果使用jQuery选择器选择元素并将处理程序附加到事件，则旧对象将多次连接到其事件的相同处理程序。

这样做的正确方法是什么？

Answer 1

也许您应该考虑使用live添加处理程序。这样，您可以声明处理程序一次，并且它现在和将来对所有匹配元素保持有效。

如果由于某种原因这是不可接受的，那么快速而肮脏的解决方案就是（例如click处理程序）：

$(".elements").unbind("click").bind("click", function () {
    // ...
});

更好的解决方案（再次，没有live）将成为hasEventListener插件。阅读文档，或使用其sandbox on JSFiddle。

Answer 2

我会这样做：

$(".element").unbind("click").live("click", function () {
// ...
});

然后您取消绑定旧的“点击”事件处理程序，并仅使用live绑定旧的和新的处理程序。

Answer 3

最简单的方法是使用.live()保持处理程序绑定现有和任何可能的未来元素与给定的选择器匹配。

Answer 4

为您的活动使用命名空间，如下所示：

$('a').bind('click.customNS', function(){...})

然后，每当你创建一个新元素时，取消绑定所有的名称空间事件，并重新绑定，如下所示：

$('a').unbind('click.customNS');
$('a').bind('click.customNS', function(){...});

或者，使用.live('click', function(){..});，它会自动将事件“绑定”到任何新创建的元素，匹配您的jQuery选择器。但是，这不适用于非CSS兼容的选择器。 （例如，jQuery特殊的父选择器）