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

对于旧版本，请使用delegate，

// 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/

jquery没有选择jquery添加的元素

3 个答案: