事件处理程序不适用于动态内容[重复]答案

【问题标题】：Event handler not working on dynamic content [duplicate]事件处理程序不适用于动态内容[重复]
【发布时间】：2013-02-12 00:16:52
【问题描述】：

我有一个标签 A，当点击它时，它会附加另一个标签 B 以在点击时执行操作 B。因此，当我单击标签 B 时，将执行操作 B。但是，.on 方法似乎不适用于动态创建的标签 B。

我的标签 A 的 html 和 jquery 如下：

<a id="address" class="add_address btn btn-inverse btn-medium pull-right push-top">Add Shipping address</a>

$('.add_address').click(function(){
    //Add another <a>
    $(document).append('<a id="address"  class="pull-right update btn btn-inverse btn-medium push-top">Update</a>');
})

当点击标签 B 时，会执行一些动作 B。我的 jquery 如下：

$('.update').on('click',function(){
  //action B
});

我有一些非动态内容也有“.update”类。在上面的.on() 方法中，对于非动态内容可以正常工作，但对于动态内容则不行。

如何使它适用于动态内容？

【问题讨论】：

您应该使用 Event Delegate 在动态添加的 DOM 元素上绑定事件。 api.jquery.com/delegate

标签： jquery dynamic-content static-content

【解决方案1】：

你必须添加选择器参数，否则事件是直接绑定而不是委托，这仅在元素已经存在时才有效（因此它不适用于动态加载的内容）。

见http://api.jquery.com/on/#direct-and-delegated-events

将您的代码更改为

$(document.body).on('click', '.update' ,function(){

jQuery 集合接收事件，然后将其委托给与作为参数给出的选择器匹配的元素。这意味着与使用live时相反，执行代码时jQuery set元素必须存在。

由于这个答案受到很多关注，这里有两个补充建议：

1)如果可能，尽量将事件监听器绑定到最精确的元素，以避免无用的事件处理。

也就是说，如果您将 b 类的元素添加到 id 为 a 的现有元素中，则不要使用

$(document.body).on('click', '#a .b', function(){

但使用

$('#a').on('click', '.b', function(){

2) 在添加带有 id 的元素时要小心，确保不会添加两次。在 HTML 中拥有两个具有相同 id 的元素不仅是“非法的”，而且会破坏很多东西。例如，选择器 "#c" 将只检索一个具有此 ID 的元素。

【讨论】：

或delegate for pre-1.7 :)
请注意，delegate 和 on 的参数相反：它是 on('click', 'selector', function(){...}) 但 delegate('selector', 'click', function( ){...})
这在移动/平板设备上效果不佳。
我在 stackoverflow 上看到了这篇文章，它帮助我决定必须对 Javascript 函数使用内联调用。 stackoverflow.com/questions/10165141/…
问题和答案都很棒..从昨天开始就绞尽脑汁！ #smh .. 我想我刚刚获得了更多的编程技能..

【解决方案2】：

.on 函数中缺少选择器：

.on(eventType, selector, function)

这个选择器很重要！

http://api.jquery.com/on/

如果新的 HTML 被注入到页面中，选择元素并在将新 HTML 放入页面后附加事件处理程序。要么， 使用委托事件附加事件处理程序

更多详情请见jQuery 1.9 .live() is not a function。

【讨论】：