jquery html動態添加的元素綁定事件詳解

在實際開發中會遇到要給動態生成的html元素綁定觸發事件的情況：

<div id="testdiv">
  <ul></ul>
</div>

　　

<div id="testdiv">
  <ul>
 
   <li name="apple">apple</li>
   <li name="pear">pear</li>
 
  </ul>
</div>
<script>
 
function test(name){
  alert("I'm "+name);
 
}
 
//做法如下:
 
$("#testdiv ul").on("click","li", function() {
  //test($(this).attr("name"));
  //do something here
});
 
//主動觸發某個<li>的click事件
 
// $("#testdiv ul li[name='apple']").trigger("click");
 
</script>

　　

但對於ajax添加進來的html代碼段，如$("#xx").html(html內容)，如果想里面的元素也會觸發我們定義的事件，必須委托

需要用到事件委托，比如：

普通綁定事件：$('.btn1').click(function(){}綁定

on綁定事件：$(document).on('click','.btn2',function(){})綁定  .btn是ajax加載的html內容樣式選擇器