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内容样式选择器

posted @ 2017-01-01 19:08  evemen  阅读(22371)  评论(0编辑  收藏  举报