jquery - jquery 不选择 jquery 添加的元素

Question

所以我有一个 jquery 函数，当点击类 'ajaxsubnote' 时它会做一些事情

$('.ajaxsubnote').click(function(){
     //do something....
})

但是用户可以通过 jquery 动态添加具有类 'ajaxsubnote' 的元素。我的问题是这些动态添加的元素，当点击时，似乎没有调用上述函数，而最初在 DOM 上的元素却......

有什么办法吗？

Answer 1

您应该使用委托事件方法来处理动态元素。见下文，

// v--- replace document with closest parent container that exist in DOM
$(document).on('click', '.ajaxsubnote', function(){
     //do something....
})

对于旧版本使用委托，

// v--- replace document with closest parent container that exist in DOM
$(document).delegate('.ajaxsubnote', 'click', function(){
     //do something....
})

Answer 2

绑定/单击事件和委托事件之间的区别非常重要。

当你使用 bind 或 click 等快捷方式时，它会将指定的事件绑定到当时匹配特定选择器的所有元素。此选择器是及时的快照，在添加新元素时不会更新。

当您使用事件委托时，您提供了一个静态父选择器，然后是您的动态元素选择器。现在，当您单击父选择器中的任意位置时，jQuery 会检查目标是否与父选择器匹配。如果目标与第二个选择器匹配，则触发事件。这意味着您可以向父内容部分添加和删除符合事件触发条件的元素，而无需每次都绑定事件。

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

所以你需要的是这样的：

$(parentElement).on( "click", ".ajaxsubnode", function(){
     //do something....
});

parentElement 尽可能具体，同时仍然是所有可能的 ajaxsubnode 类的父级。

Answer 3

您需要使用该on()函数来委托点击事件

$("dynamicContainerElement").on("click", "dynamicallyAddedElement", 
     function () 
     { 
        /* Your code here */
     });

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