jQuery live 替代方案

2013年11月07日 04:19:17

作者： Zjmainstay

一直都知道jQuery 1.7开始就提示live方法将移除，并且可以使用on方法进行替代，却没有去尝试。昨天朋友问起，动手做了，才发现，怎么着好像不行？！！最后才发现，原来，没用对语法！

jQuery.on() 绑定点击事件可以用两种方式使用：

1、$("body p").on("click", function(){
   console.log("clicked_1");
});
2、$("body").on("click", "p", function(){
    console.log("clicked_2");
});

两种使用方式效果是不同的，第一种的作用点在p标签上，它会对body内所有p标签绑定click事件，而第二种作用点在body上面，它捕获body内所有p标签的click事件，也就是说，第一种方法是静态绑定的，新增p标签不会得到事件绑定，而第二种，新增p标签只要是body内的，都能被捕获，从而实现类似live的效果。我本来用的第一种，所以测试失败。

补充：
今天发现对body的委托模式在iPhone上会出现bug，修复如下：
1. 添加一个cursor为pointer的样式

<style>
    .clickable
    {
         cursor: pointer;
    }
</style>

2. 给点击事件的p标签加上class="clickable"

总结：对body的委托模式在iPhone上面会出现兼容问题，以后使用的时候，把事件委托在一个外层标签上面即可。

例子：
    原来：$("body").on("click", ".clicker", function(){});
    改正：$(".clicker-wrap").on("click", ".clicker", function(){});
<body>
<div class="clicker-wrap">
    <div class="clicker">clicker</div> 
</div>
</body>