jquery html动态添加的元素绑定事件详解

Posted 2020-10-11

在实际开发中会遇到要给动态生成的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内容样式选择器