jquery动态绑定的一个坑

早期jquery的代码,有一种典型的过度设计风格。尤其是1.7以前的,恨不得每一个方法都要剥离重载一百次。

以动态绑定事件为例,有live,bind,delegate……

1.7以后,所有的事件绑定,统一走了on,比如

<div id="plat">  
<button class="item">  
警告
</button>  
</div>  
<script>  
$(".item").on("click",function(){
alert('警告');  
});
</script>  

按钮被绑定click事件到alert。但是如果这个按钮是js动态生成的,也就是代码块加载的时候,选择器选不中任何元素,那就有问题了。比如

<div id="plat">  
</div>  
<script>  
$("$plat").html("<button class="item">警告</button>");
$(".item").on("click",function(){
alert('警告');  
});
</script>  

这时候,其实并没有绑定任何元素,即使页面上有这个按钮,可是click事件没有用。因为在加载过程中,没有任何元素被选择器选中,无法促发任何一个钩子~。所以,在jquery中,给动态生成的元素绑定事件,必须要由一个已经存在的父节点作为前置选择器,保证钩子能够正确回执,如下:

<div id="plat">  
</div>  
<script>  
$("$plat").html("<button class="item">警告</button>");
$("#plat").on("click",'.item',function(){
alert('警告');  
});
</script>  

刘摸鱼

退堂鼓表演艺术家

杭州