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入门教程(5) js Screen屏幕对象
Jan 31 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
Dec 09 Javascript
ie支持function.bind()方法实现代码
Dec 27 Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
js 自带的sort() 方法全面了解
Aug 16 Javascript
jquery实现左右轮播切换效果
Jan 01 jQuery
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
Dec 20 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 Javascript
在Vue里如何把网页的数据导出到Excel的方法
Sep 30 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(3)
2006/10/09 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
js切换div css注意的细节
2012/12/10 Javascript
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
Vue之mixin全局的用法详解
2018/08/22 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
用实例说明python的*args和**kwargs用法
2013/11/01 Python
浅谈MySQL中的触发器
2015/05/05 Python
Python实现Smtplib发送带有各种附件的邮件实例
2017/06/05 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
Python笔记之facade模式
2019/11/20 Python
django序列化serializers过程解析
2019/12/14 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
python实现批量修改文件名
2020/03/23 Python
python如何实现图片压缩
2020/09/11 Python
Python用access判断文件是否被占用的实例方法
2020/12/17 Python
初中家长评语大全
2014/12/26 职场文书
肖申克救赎观后感
2015/06/02 职场文书
就业证明函
2015/06/17 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书
证婚人致辞精选
2015/07/28 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
MySQL分区表实现按月份归类
2021/11/01 MySQL
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫