Dynamische Elementereignisbindung: Wie binde ich Ereignisse an dynamisch erstellte Elemente?

Question

Ich habe einen Code, in dem ich alle Auswahlfelder auf der Seite durchlaufe und einige Anpassungen .hover 事件绑定到它们，以在 mouse on/off an ihrer Breite vornehme.

Dies geschieht, nachdem die Seite fertig ist und einwandfrei funktioniert.

Das Problem, das ich habe, ist, dass bei allen über Ajax oder DOM nach der ersten Schleife hinzugefügten Auswahlfeldern die Ereignisse nicht gebunden sind.

Ich habe dieses Plugin (jQuery Live Query Plugin) gefunden, aber bevor ich das Plugin verwende, um meiner Seite weitere 5 KB hinzuzufügen, wollte ich sehen, ob jemand weiß, wie das geht, entweder direkt mit jQuery oder über andere Optionen.

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
});

适用于