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 THICKBOX弹出层插件
Aug 30 Javascript
使用Javascript接收get传递的值的代码
Nov 30 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
js实现数组转换成json
Jun 26 Javascript
javascript动态生成树形菜单的方法
Nov 14 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
jQuery查找节点方法完整实例
Sep 13 Javascript
Centos7 中安装 Node.js v4.4.4
Nov 03 Javascript
React全家桶环境搭建过程详解
May 18 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 Javascript
微信小程序实现列表左右滑动
Nov 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字符串处理的10个简单方法
2010/06/30 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
Yii2 如何在modules中添加验证码的方法
2017/06/19 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
js 浮动层菜单收藏
2009/01/16 Javascript
js中将String转换为number以便比较
2014/07/08 Javascript
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
JavaScript DOM基础
2015/04/13 Javascript
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
浅谈Javascript数组的使用
2015/07/29 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
Vue中v-for的数据分组实例
2018/03/07 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
vue slot与传参实例代码讲解
2019/04/28 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
postman模拟访问具有Session的post请求方法
2019/07/15 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
python 实现多线程下载视频的代码
2019/11/15 Python
python判断all函数输出结果是否为true的方法
2020/12/03 Python
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
Vita Fede官网:在意大利手工制作,在纽约市设计
2019/10/25 全球购物
大班开学家长寄语
2014/04/04 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
个人校本研修方案
2014/05/26 职场文书
硕士生找工作求职信
2014/07/05 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
python之基数排序的实现
2021/07/26 Python
JavaScript parseInt0.0000005打印5原理解析
2022/07/23 Javascript