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 相关文章推荐
出现“不能执行已释放的Script代码”错误的原因及解决办法
Aug 29 Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
在JavaScript中获取请求的URL参数
Dec 22 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
JavaScript包装对象使用详解
Jul 09 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 Javascript
jQuery实现轮播图效果
Nov 26 jQuery
一道JS算法面试题——冒泡、选择排序
Apr 21 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脚本的10个技巧(4)
2006/10/09 PHP
ajax在joomla中的原生态应用代码
2012/07/19 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
初学Javascript的一些总结
2008/11/03 Javascript
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python 用下标截取字符串的实例
2018/12/25 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
python实现简单坦克大战
2020/03/27 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
"引用"与多态的关系
2013/02/01 面试题
创意广告词
2014/03/17 职场文书
房地产开发项目建议书
2014/05/16 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书
给客户的检讨书
2014/12/21 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书
学习经验交流会策划书
2015/11/02 职场文书
员工给公司的建议书
2019/06/24 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书
golang DNS服务器的简单实现操作
2021/04/30 Golang