我有一个标签 A,当点击它时,它会附加另一个标签 B 以在点击时执行操作 B。因此,当我单击标签 B 时,将执行操作 B。但是,该.on方法似乎不适用于动态创建的标签 B。
.on
我的标签 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()方法适用于非动态内容,但不适用于动态内容。
.on()
如何使其适用于动态内容?
您必须添加选择器参数,否则事件是直接绑定而不是委托的,这仅在元素已经存在时才有效(因此它不适用于动态加载的内容)。
请参阅http://api.jquery.com/on/#direct-and-delegated- events
将您的代码更改为
$(document.body).on('click', '.update' ,function(){
jQuery 集合接收事件,然后将其委托给与作为参数给出的选择器匹配的元素。这意味着与使用时相反,live执行代码时必须存在 jQuery 集合元素。
live
由于这个答案受到很多关注,这里有两个补充建议:
1) 如果可能,尽量将事件监听器绑定到最精确的元素,以避免无用的事件处理。
也就是说,如果您将 class 的元素添加b到 id 的现有元素a,则不要使用
b
a
$(document.body).on('click', '#a .b', function(){
但使用
$('#a').on('click', '.b', function(){
2) 当你添加一个带有 id 的元素时要小心,以确保你没有添加两次。在 HTML 中拥有两个具有相同 id 的元素不仅是“非法的”,而且会破坏很多东西。例如,选择器"#c"将只检索一个具有此 ID 的元素。
"#c"