jQuery侦听器不会“侦听”动态创建的DOM元素上的事件[重复]答案

【问题标题】：jQuery listener doesn't "listen" to events on DOM elements dynamically created [duplicate]jQuery侦听器不会“侦听”动态创建的DOM元素上的事件[重复]
【发布时间】：2011-01-28 15:23:12
【问题描述】：

我有一个这样的听众：

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

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

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

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

谁能给点启示？

【问题讨论】：

标签： jquery events dom click listener

【解决方案1】：

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

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

【讨论】：

谢谢。在我的情况下，我必须像这样将事件添加到我的文档元素中：$(document).on('click','.mybutton', function() { //handler });

【解决方案2】：

将事件绑定到尚不存在的元素是不可能的。正如 Yogurt 所说，实现这一点的方法是使用 'on' 并指定您希望用作函数的第二个参数的选择器。

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

它的作用是告诉父元素持有一个点击事件。每当它被点击时，它会检查事件的来源，如果它匹配参数二，它会触发一个事件。这称为事件委托。您允许父母接受事件，然后在成功比较时触发事件。这是一种常见的设计模式。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

当然。

动态监听器不是动态的。

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

为所有现有元素连接一个监听器。

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

基本上，新元素不会被监听，因为您没有将新的处理程序附加到它们;)

【讨论】：