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');
})