jQuery給動態新增的元素繫結事件的方法

武文博KevinLM發表於2017-08-16
jQuery事件

jquery中繫結事件一般使用bind，或者click，但是這隻能是對已經載入好的元素定義事件，那些後來新增插入的元素則需要另行繫結。在1.7版本以前使用live。但是在1.8版本以後推薦使用on。這裡介紹jQuery中如何給動態新增的元素繫結事件
在實際開發中會遇到要給動態生成的html元素繫結觸發事件的情況

例如

?
1
2
3
<divid="testdiv">
  <ul></ul>
</div>

需要給<ul>裡面動態新增的<li>標籤新增click事件
 
jquery 1.7版以前使用live動態繫結事件

?
1
2
$("#testdiv ul li").live("click",function(){
});

jquery 1.7版以後使用on動態繫結事件

testdiv ul 頁面已經載入的元素

li 頁面動態生成的元素JS寫入

?
1
2
3
$("#testdiv ul").on("click","li",function() {
     //do something here
 });

相關文章