您的位置：首页 > Web前端 > JQuery

解决jquery 动态生成的元素的事件无法绑定

2015-10-09 13:51 1011 查看

一、错误示例：
对于自己用脚本动态生成的元素，无法绑定事件。例如：
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(){
//获取当前动态创建元素的索引值：
iNow=$('a[class=active]').index(this)
console.log('iNow:',iNow)
console.log($(this).html())
})

</script>
</body>

运行结果：当span标签被点击的时候，变成a标签，然后再点击a标签，console里打印出它的html内容并且打印新创建元素中被点击的索引。iNow:00iNow:12结果截图如下

说明：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” 博客，谢绝转载！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航