初始时会监听 #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>
.click()
实际上是 .on("click", handler)
的简化,而 $(selector).on(events, handler)
只会对当前已经存在,且满足 selector
条件的元素绑定 events
,也就是说,这个绑定只针对于当前存在的元素,而在其之后加入到 DOM
中的元素,即使满足 selector
条件,也不会绑定对应的 events
。
在.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'); })