一、错误示例:
对于自己用脚本动态生成的元素,无法绑定事件。例如:
body下的代码:
<body> <ul> <li><span class="class1">11111</span></li> <li><span class="class1">22222</span></li> <li><span class="class1">33333</span></li> </ul> <script src="../static/js/jquery.min.js"></script> <script> aButton=$(‘li‘) aButton.each(function(i){ aButton.eq(i).attr(‘tag‘,‘edit‘) $(this).click(function(){ $(this).html(‘<a href="#" class="active">‘+i+‘</a>‘) }) }) aA=$(‘a‘) aA.each(function(i){ console.log(‘kkkk‘) $(this).click(function(){ console.log(‘i‘) }) }) </script> </body>
运行结果:
当span标签被点击的时候,变成a标签,然后再点击a标签,没有任何反应。
原因:结果当生成a标签之后,无论如何点击都没有效果,因为jquery只能绑定页面本身存在的元素。动态生成的元素不能被绑定。而click事件,其实是bind(‘click‘,...)的简化形式。
二、正确的方法:
<body> <ul> <li><span class="class1">11111</span></li> <li><span class="class1">22222</span></li> <li><span class="class1">33333</span></li> </ul> <script src="../static/js/jquery.min.js"></script> <script> aButton=$(‘li‘) aButton.each(function(i){ aButton.eq(i).attr(‘tag‘,‘edit‘) $(this).click(function(){ $(this).html(‘<a href="#" class="active">‘+i+‘</a>‘) }) }) $(‘li‘).delegate(‘a[class=active]‘,‘click‘,function(){ console.log($(this).html()) }) </script> </body>
运行结果:
当span标签被点击的时候,变成a标签,然后再点击a标签,console里打印出它的html内容。
说明:
1)delegate方法,代理或者说是委托,实现原理是事件的冒泡,在指定的祖先元素中注册事件(delegate在特定元素上),元素事件触发,传播到这个元素然后进行筛选。可以在祖先元素中绑定事件,比如上面的li是祖先元素,而新生成的元素a都是li的子元素,所以动态生成的元素的事件就可以绑定了。
delegate官网介绍:Attach a handler to one or more events for all elements that match the selector,now or in the future, based on a specific set of root elements.
官网网址:http://api.jquery.com/delegate/
2)选择器,注意:
var a= $("input:[name^=‘a‘]");
表示所有name以a开头的input。而上面示例a[class=active],表示选中所有class为active的a标签
本文出自 “select” 博客,谢绝转载!
原文地址:http://wangqiaomei.blog.51cto.com/5561182/1701183