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

在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况：

?

1 2 3

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

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

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