我有一个标签a,当点击它时,它会附加另一个标签B来执行点击动作B。所以当我点击标签B时,动作B被执行。然而,.on方法似乎对动态创建的标记B不起作用。
我的html和jquery标签A如下所示:
<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
});
我有一些有类的非动态内容”。更新”。上面的.on()方法适用于非动态内容,但不适用于动态内容。
如何使它适用于动态内容?
您必须添加选择器参数,否则事件将直接绑定而不是委托,这仅在元素已经存在时才有效(因此它不适用于动态加载的内容)。
看到http://api.jquery.com/on/ direct-and-delegated-events
将代码更改为
$(document.body).on('click', '.update' ,function(){
jQuery集合接收事件,然后将其委托给与参数指定的选择器匹配的元素。这意味着与使用live时相反,jQuery set元素在执行代码时必须存在。
由于这个回答受到了很多关注,这里有两个补充建议:
1)如果可能的话,尝试将事件监听器绑定到最精确的元素,以避免无用的事件处理。
也就是说,如果您正在向id为a的现有元素添加类b的元素,那么不要使用
$(document.body).on('click', '#a .b', function(){
但是使用
$('#a').on('click', '.b', function(){
2)小心,当你添加一个带有id的元素时,要确保你没有添加它两次。在HTML中使用相同id的两个元素不仅是“非法的”,而且会破坏很多东西。例如,选择器“#c”将只检索一个具有此id的元素。
在.on函数中缺少选择器:
.on(eventType, selector, function)
这个选择器非常重要!
http://api.jquery.com/on/
如果将新的HTML注入到页面中,请选择元素和
在将新HTML放入页面后附加事件处理程序。或者,
使用委托事件附加事件处理程序
请参阅jQuery 1.9 .live()不是函数了解更多细节。