jQuery: Ajax动态加载内容on()绑定事件无效的解决方法
问题描述
这是一个很普遍但又经常犯错的问题,还是记录一下。
一个例子
HTML:
<div id="the_div">
</div>
<button id="btn">test</button>
Javascript:
$('#btn').click(function(){
$('#the_div').append('<button>new button</button>');
})
$('#the_div button').click(function(){
alert('clicked');
})
初始时会监听#btn
即test按钮,以及#the_div button
即div中的所有按钮的click事件。当点击test按钮后div内会动态添加new button按钮,而我们期望点击new button按钮后,会弹出一个alert,但事实上这么做是不会触发alert的,你可以试试看。
问题分析
.click()
实际上是.on( "click", handler )
的简化,而$( selector ).on( events, handler )
只会对当前已经存在,且满足selector
条件的元素绑定events
,也就是说,这个绑定只针对于当前存在的元素,而在其之后加入到DOM中的元素,即使满足selector
条件,也不会绑定对应的events
。
解决方法
实际上jQuery也有专门的方法解决这个需求,即[.live()],$( selector ).live( events, handler )
会对所有当前和未来满足selector
条件的元素绑定对应的events
。
但从jQuery 1.9开始,.live()
就被移除了。
在.live()
的API文档中,官方就给出了替代.live()
的方法,即目前最常用的方法:
$( document ).on( events, selector, data, handler );
这样就能对所有当前和未来满足selector
条件的元素绑定对应的events
了,如:
$( "a.offsite" ).live( "click", function() {
alert( "Goodbye!" ); // jQuery 1.3+
});
$( document ).on( "click", "a.offsite", function() {
alert( "Goodbye!" ); // jQuery 1.7+
});
一个例子
HTML:
<div id="the_div">
</div>
<button id="btn">test</button>
Javascript:
$('#btn').click(function(){
$('#the_div').append('<button>new button</button>');
})
$(document).on('click','#the_div button',function(){
alert('clicked');
})
牛 pi!
学习了!!!!
呵呵