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

这是一个很普遍但又经常犯错的问题，需要 Mark 一下。

一个 jQuery JS Append 元素的例子

初始时会监听 #btn 即 test 按钮，以及 #the_div button 即 div 中的所有按钮的 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 append 内容后，绑定事件无效的解决方法

一个 jQuery JS Append 元素的例子

Append 后 jQuery 监听无效问题分析

Append 后 jQuery 监听无效解决方法

回到刚才的例子

jQuery 监听扩展阅读：

CommandNotFound ⚡️ 坑否 - 其他频道扩展阅读：

发表评论