jquery - 事件处理程序不适用于动态内容

标签 jquery dynamic-content static-content

<分区>

我有一个标签 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 被点击时,一些 Action B 被执行。我的 jquery 如下:

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

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

如何让它适用于动态内容?

最佳答案

必须添加选择器参数,否则事件将直接绑定(bind)而不是委托(delegate),这仅在元素已存在时有效(因此它不适用于动态加载的内容)。

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

将您的代码更改为

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

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

由于这个答案受到了很多关注,这里有两个补充建议:

1) 在可能的情况下,尝试将事件监听器绑定(bind)到最精确的元素,以避免无用的事件处理。

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

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

但是使用

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

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

关于jquery - 事件处理程序不适用于动态内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15090942/

相关文章:

javascript - 重定向到包含 anchor 的 url

jquery - Angularjs - 使用指令或小部件动态更改 dom?

JavaScript:未更新变量的动态值。为什么会这样?

php - 如何将动态 PHP 变量从一个页面传递到另一个页面?

html - 如何让浏览器仅在绝对必要时自动断字?

reactjs - 将博客内容/静态文件添加到现有的 Preact.js 网站

java - 在configuration.reload()之后Struts2不提供静态资源

jquery - 我如何让 wapper 扩展?

javascript - CSS 媒体查询与 JavaScript

http-status-code-404 - HTTP 404 : The/Media directory is not serving images