jQuery1.9+中删除了live以后的替代方法


Posted in Javascript onJune 17, 2016

根据jQuery的官方描述,live方法在1.7中已经不建议使用,在1.9中删除了这个方法。并建议在以后的代码中使用on方法来替代。

on方法可以接受三个参数:事件名、触发选择器、事件函数。

需要特别注意的是:on方法中间的这个触发选择器就是你将要添加的HTML元素的类名、id或者元素名,使用它就可以实现live的效果。

例如我的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

Javascript 相关文章推荐
随机显示经典句子或诗歌的javascript脚本
Aug 04 Javascript
基于jquery的放大镜效果
May 30 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
Apr 16 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
jQuery中$.each使用详解
Jan 29 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
基于JQuery实现分隔条的功能
Jun 17 #Javascript
js基于setTimeout与setInterval实现多线程
Jun 17 #Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
Jun 17 #Javascript
jQuery animate easing使用方法图文详解
Jun 17 #Javascript
JS常用字符串方法(推荐)
Jan 15 #Javascript
url中的特殊符号有什么含义(推荐)
Jun 17 #Javascript
JS模拟的Map类实现方法
Jun 17 #Javascript
You might like
PHP如何抛出异常处理错误
2011/03/02 PHP
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
php如何实现数据库的备份和恢复
2020/11/30 PHP
js和jquery批量绑定事件传参数一(新猪猪原创)
2010/06/23 Javascript
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
iframe的父子窗口之间的对象相互调用基本用法
2013/09/03 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
Angular弹出模态框的两种方式
2017/10/19 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
[00:56]PWL开团时刻DAY8——追追追追追!
2020/11/09 DOTA
python实现将英文单词表示的数字转换成阿拉伯数字的方法
2015/07/02 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
Python Web框架之Django框架cookie和session用法分析
2019/08/16 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
django inspectdb 操作已有数据库数据的使用步骤
2021/02/07 Python
人民教师的自我评价分享
2014/02/21 职场文书
运动会800米加油稿
2014/02/22 职场文书
一份文言文检讨书
2014/09/13 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
施工现场安全管理制度
2015/08/05 职场文书
女性励志书籍推荐
2019/08/19 职场文书
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python