Ereignisbindung für dynamisch erstellte Elemente?

Question

Ich habe einen Code, in dem ich alle Auswahlfelder auf der Seite durchlaufe und das Ereignis .hover an sie binde, um ihre Breite beim Klicken mit der Maus zu ändern ;/code>.

Dies geschieht, wenn die Seite bereit ist und ordnungsgemäß funktioniert.

Das Problem, das ich habe, ist, dass an alle über Ajax oder DOM nach der ersten Schleife hinzugefügten Auswahlfelder keine Ereignisse 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 es 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，并且事件只需要向上冒泡一层（从单击的 tr 到 tbody）。

注意：委托事件不适用于SVG。< /p>

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

适用于

<div class="buttons">
    <!-- <button>s that are generated dynamically and added here -->
</div>