2013年11月07日 04:19:17

jQuery live 替代方案

作者: 

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

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

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

两种使用方式效果是不同的,第一种的作用点在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上面会出现兼容问题,以后使用的时候,把事件委托在一个外层标签上面即可。

  1. 例子:
  2. 原来:$("body").on("click", ".clicker", function(){});
  3. 改正:$(".clicker-wrap").on("click", ".clicker", function(){});
  4. <body>
  5. <div class="clicker-wrap">
  6. <div class="clicker">clicker</div>
  7. </div>
  8. </body>

演示地址:
1. jQuery live替代方案演示
2. jQuery live替代方案演示-iPhone兼容解决



未经同意禁止转载!
转载请附带本文原文地址:jQuery live 替代方案,首发自 Zjmainstay学习笔记
阅读( 5829 )
看完顺手点个赞呗:
(4 votes)

1.PHP cURL群:PHP cURL高级技术
2.正则表达式群:专精正则表达式
3. QQ联系(加请说明):QQ联系博主(951086941)
4. 邮箱:zjmainstay@163.com
5. 打赏博主:

  1. 模拟登录后数据采集
  2. 网页内容数据采集
  3. 采集内容正则解析
  4. 数据采集难题咨询

阿里云幸运券分享
网站总访问量: