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 相关文章推荐
基于jquery的分页控件(C#)
Jan 06 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
Sep 03 Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
一个js控制的导航菜单实例代码
Dec 03 Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 Javascript
javascript属性访问表达式用法分析
Apr 25 Javascript
jQuery入门之层次选择器实例简析
Dec 11 Javascript
省市联动效果的简单实现代码(推荐)
Jun 06 Javascript
老生常谈JavaScript数组的用法
Jun 10 Javascript
vue resource post请求时遇到的坑
Oct 19 Javascript
vue 父组件中调用子组件函数的方法
Jun 06 Javascript
详解vue v-model
Aug 31 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
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
修改UA在PC中访问只能在微信中打开的链接方法
2017/11/27 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
vue.js根据代码运行环境选择baseurl的方法
2018/02/28 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
javascript防抖函数debounce详解
2019/06/11 Javascript
详解NodeJs项目 CentOs linux服务器线上部署
2019/09/16 NodeJs
webpack HappyPack实战详解
2019/10/08 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
用python登录Dr.com思路以及代码分享
2014/06/25 Python
Python MySQLdb Linux下安装笔记
2015/05/09 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
Python中staticmethod和classmethod的作用与区别
2018/10/11 Python
python requests 库请求带有文件参数的接口实例
2019/01/03 Python
python实现一个简单的ping工具方法
2019/01/31 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
2014/04/08 HTML / CSS
新西兰优惠网站:Treat Me
2019/07/04 全球购物
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
大专生找工作自荐书
2014/06/10 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
教师节感谢信
2015/01/22 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL