jQuery1.9+中删除了live以后的替代方法
2016-03-14 20:29
609 查看
.live() removed The .live() method has been deprecated since jQuery 1.7 and has been removed in 1.9. We recommend upgrading code to use the .on() method instead. To exactly match $("a.foo").live("click", fn), for example, you can write $(document).on("click", "a.foo", fn). For more information, see the .on() documentation. In the meantime, the jQuery Migrate plugin can be used to restore the .live() functionality.
根据jQuery的官方描述,live方法在1.7中已经不建议使用,在1.9中删除了这个方法。并建议在以后的代码中使用on方法来替代。
on方法可以接受三个参数:事件名、触发选择器、事件函数。
需要特别注意的是:on方法中间的这个触发选择器就是你将要添加的HTML元素的类名、id或者元素名,使用它就可以实现live的效果。
$("a.foo").live("click", fn); 替换为
$(document).on("click", "a.foo", fn)
例如我的html文档中已经有了一个id为parent的div,我将要在这个div内部再动态添加一个class为son的span,然后我为这个span绑定一个事件,那么我需要这样写:
$('#parent').on('click','.son',function(){alert('test')});
这个触发选择器实际上就是在 JQ内部判断了一次事件参数的$(e.target).is(selector),只有触发对象匹配触发选择器才会触发。这是利用了事件冒泡的机制来完成 的,原本的live也是使用冒泡机制所以既然on可以实现那么live也就没有存在的必要了,只不过为了兼容让它从1.7苟延残喘的活到了1.9而已。
在低版本IE中A标签在鼠标按下时候会出现虚线边框,这是由focus造成的。我们只要在全局事件中做点手脚就能解决这个问题。在现代浏览器中focus是不冒泡的,但是低版本浏览器中可以冒泡。所以对于低版本浏览器中对focus使用live是有效的。在jQuery1.9之前的版本我们可以这样写:
$("a").live("focus",function(){ this.blur(); });
jQuery1.9之后由于live被删除了,所以应该这样写:
$(document).on("focus","a",function(){ this.blur(); });
还要注意个问题,如果是从live的写法换成on的写法别忘了调整调用链。因为live的返回值是事件触发的对象,而使用on则是在容器对象上。
//jQuery1.9- $("#panel").find("div").live("click",function(){ alert("x"); }).addClass("x"); //jQuery1.9+ $("#panel").on("click","div",function(){ alert("x"); }).find("div").addClass("x");
注意最后的find("div"),其它就没什么问题了。下面是官方说明
http://jquery.com/upgrade-guide/1.9/#live-removed
相关文章推荐
- jQuery插件开发
- jQuery选择器总结
- jquery中构造对象的核心
- jQuery 插件为什么要return this.each()
- JQuery:选择器、动画、AJAX请求
- jquery如何获取一个select里面的所有option的值
- jquery知识小结
- Jquery 之DOM文档操作(一)
- jQuery设置checkbox全选(区别jQuery版本)
- jQuery获取Select选择的Text和 Value(转)
- ectouch 实现按需加载商品信息(Jquery 2.1.1 插件版本)
- jquery之AJAX
- jquery实现二级联动,实时查询数据库
- jquery获取复选框checkbox的值
- Jquery validate 静态方法和常用方法的使用
- [前端] jquery验证手机号、身份证号、中文名称
- HTML5开发移动web应用—JQuery Mobile(4)-事件
- jquery+css3实现3D拖拽相册
- 从jQuery中学习来的另一种继承方式(技巧)
- DOM对象和jQuery对象互相转换