jQuery监听器不会“监听”动态创建的DOM元素上的事件

Question

我有一个这样的听众：

$('.delete').click(function() {
  ...some stuff
});

此外，在同一页面上，另一个脚本以这种方式动态地向DOM添加元素：

$('#list').append('<tr><td><a class="delete" href="#">delete</a></td></tr>');

我的问题是监听器没有“监听”这些动态创建的元素。

有人可以解决一些问题吗？

Answer 1

它只会侦听绑定事件处理程序时存在的元素。如果您希望它监听动态创建的元素，您可以使用live()函数，该函数适用于当前和未来的元素。

编辑：从jQuery 1.7开始，推荐的方法是使用.on()函数，它通过提供附加所需的所有功能来替换.bind()，.live()和.delegate()事件处理程序。

Answer 2

将事件绑定到尚不存在的元素是不可能的。正如Yogurt所表达的那样，你可以实现这一点的方法是使用'on'并指定你想要用作函数的第二个参数的选择器。

this.$someStaticParent.on('click', 'li', functionName); 

这样做，告诉父元素持有点击事件。无论何时单击它，它都会检查事件来自何处，如果它与参数2匹配，则触发事件。这称为事件委托。您允许父级接受事件，然后在成功比较时触发事件。这是一种常见的设计模式。

Answer 3

是的，请查看JQuery Live功能。 还记得绑定和取消绑定事件。有链接在每次创建时都保持绑定的问题，但由于页面没有重新加载，链接会有5或6个与之关联的点击事件，并导致问题。只需要将事件解除绑定链接。

Answer 4

不确定

动态侦听器不是动态的。

$('.delete').click(function() {

将侦听器连接到所有现有元素。

当你添加另一个元素时，你需要重新运行它以确保新元素得到相同的处理程序连接。

基本上，新元素不会被收听，因为你没有为它们附加新的处理程序;）