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 相关文章推荐
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
Nov 05 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
Sep 28 Javascript
JS使用Dijkstra算法求解最短路径
Jan 17 Javascript
ES6 更易于继承的类语法的使用
Feb 11 Javascript
jquery登录的异步验证操作示例
May 09 jQuery
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
Jun 07 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 Javascript
JS深入学习之数组对象排序操作示例
May 01 Javascript
JS中箭头函数与this的写法和理解
Jan 14 Javascript
适合后台管理系统开发的12个前端框架(小结)
Jun 29 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验证码代码
2012/02/27 PHP
php中simplexml_load_file函数用法实例
2014/11/12 PHP
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
ThinkPHP实现更新数据实例详解(demo)
2016/06/29 PHP
PHP如何获取当前主机、域名、网址、路径、端口等参数
2017/06/09 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
phpstudy2020搭建站点的实现示例
2020/10/30 PHP
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
javascript学习笔记(一)基础知识
2014/09/30 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
Python的条件语句与运算符优先级详解
2015/10/13 Python
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
python3多线程知识点总结
2019/09/26 Python
树莓派4B+opencv4+python 打开摄像头的实现方法
2019/10/18 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
美国批发零售网站:GearXS
2016/07/26 全球购物
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
新三好学生主要事迹
2014/01/23 职场文书
大四毕业生自荐书
2014/07/05 职场文书
家长评语怎么写
2014/12/30 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python