动态元素事件绑定：如何将事件绑定到动态创建的元素？

Question

我有一些代码，我循环遍历页面上的所有选择框，并将 .hover 事件绑定到它们，以在 mouse on/off 上对其宽度进行一些调整。

这发生在页面准备好并且工作正常。

我遇到的问题是，在初始循环之后通过 Ajax 或 DOM 添加的任何选择框都不会绑定事件。

我已经找到了这个插件（jQuery Live Query Plugin），但是在我使用插件向我的页面添加另一个 5k 之前，我想看看是否有人知道如何做到这一点，无论是直接使用 jQuery 还是通过其他选项。

Answer 1

jQuery.fn.on 的文档中有很好的解释。

简而言之：

因此在下面的示例中 #dataTable tbody tr 在生成代码之前必须存在。

$("#dataTable tbody tr").on("click", function(event){
    console.log($(this).text());
});

如果新的 HTML 被注入到页面中，最好使用委托事件来附加事件处理程序，如下所述。

委托事件的优点是它们可以处理来自稍后添加到文档中的后代元素的事件。例如，如果表存在，但使用代码动态添加行，则以下内容将处理它：

$("#dataTable tbody").on("click", "tr", function(event){
    console.log($(this).text());
});

除了能够处理尚未创建的后代元素上的事件之外，委托事件的另一个优点是，当必须监视许多元素时，它们可能会降低开销。在 tbody 中有 1,000 行的数据表上，第一个代码示例将处理程序附加到 1,000 个元素。

委托事件方法（第二个代码示例）仅将事件处理程序附加到一个元素 tbody，并且该事件只需要向上冒泡一级（从单击的 tbody 到 tbody）。

注意：委托事件不适用于SVG。

Answer 2

从 jQuery 1.7 开始，您应该使用 jQuery.fn.on 并填充选择器参数：

$(staticAncestors).on(eventName, dynamicChild, function() {});

说明：

这称为事件委托，其工作原理如下。该事件附加到应处理的元素的静态父级 (staticAncestors)。每次在此元素或后代元素之一上触发事件时，都会触发此 jQuery 处理程序。然后，处理程序检查触发事件的元素是否与您的选择器匹配（dynamicChild）。当存在匹配时，就会执行您的自定义处理程序函数。

---

在此之前，推荐的方法是使用 live()：

$(selector).live( eventName, function(){} );

但是，live() 在 1.7 中已被弃用，取而代之的是 on()，并在 1.9 中完全删除。 live()签名：

$(selector).live( eventName, function(){} );

...可以替换为以下on()签名：

$(document).on( eventName, selector, function(){} );

---

例如，如果您的页面动态创建类名为 dosomething 的元素，您可以将事件绑定到已经存在的父级（这是问题的核心，您需要一些东西存在绑定到，不绑定到动态内容），这可以（也是最简单的选项）是 document。但请记住 document 可能不是最有效的选择 .

$(document).on('mouseover mouseout', '.dosomething', function(){
    // what you want to happen when mouseover and mouseout 
    // occurs on elements that match '.dosomething'
});

事件绑定时存在的任何父级都可以。例如

$('.buttons').on('click', 'button', function(){
    // do something here
});

适用于