技术频道


jQuery append 内容后,绑定事件无效的解决方法

一个 jQuery JS Append 元素的例子


初始时会监听 #btntest 按钮,以及 #the_div buttondiv 中的所有按钮的 click 事件。当点击 test 按钮后 div 内会动态添加 new button 按钮,而我们期望是:点击 new button 按钮后,会弹出一个 alert,但事实上这么做是不会触发 alert 的,代码如下:

<div id="the_div">
</div>
<button id="btn">test</button>

Append 后 jQuery 监听无效问题分析


.click() 实际上是 .on("click", handler) 的简化,而 $(selector).on(events, handler) 只会对当前已经存在,且满足 selector 条件的元素绑定 events,也就是说,这个绑定只针对于当前存在的元素,而在其之后加入到 DOM 中的元素,即使满足 selector 条件,也不会绑定对应的 events

Append 后 jQuery 监听无效解决方法


在.live()的API文档中,官方就给出了替代.live()的方法,即目前最常用的方法:

$( document ).on( events, selector, data, handler );

这样就能对所有当前和未来满足selector条件的元素绑定对应的events了,如:

$( "a.offsite" ).live( "click", function() {
  alert( "Goodbye!" ); // jQuery 1.3+
});
$( document ).delegate( "a.offsite", "click", function() {
  alert( "Goodbye!" ); // jQuery 1.4.3+
});
$( document ).on( "click", "a.offsite", function() {
  alert( "Goodbye!" );  // jQuery 1.7+
});

回到刚才的例子


HTML

<div id="the_div">
</div>
<button id="btn">test</button>

JS

$('#btn').click(function(){
    $('#the_div').append('<button>new button</button>');
})

$(document).on('click','#the_div button',function(){
    alert('clicked');
})

jQuery 监听扩展阅读:



发表评论