早期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>