在实际开发中会遇到要给动态生成的 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 绑定事件:$().on('click','.btn2',function(){}) 绑定 .btn 是 ajax 加载的 html 内容样式选择器
来源: