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创建插件的代码分析
Apr 14 Javascript
iframe父页面获取子页面参数的方法
Feb 21 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
解析浏览器端的AJAX缓存机制
Jun 21 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
angular4实现tab栏切换的方法示例
Oct 21 Javascript
浅谈vue-router2路由参数注意的问题
Nov 08 Javascript
教你如何用node连接redis的示例代码
Jul 12 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
解决vuex刷新数据消失问题
Nov 12 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+SQLite存储方案
2010/09/04 PHP
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
根据分辩率调用不同的CSS.
2007/01/08 Javascript
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
javascript中sort排序实例详解
2016/07/24 Javascript
详解Angular.js的$q.defer()服务异步处理
2016/11/06 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
vue 1.0 结合animate.css定义动画效果
2018/07/11 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
vue-test-utils初使用详解
2019/05/23 Javascript
vue-property-decorator用法详解
2019/12/12 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
[59:32]Liquid vs Fnatic 2019国际邀请赛淘汰赛败者组BO1 8.20.mp4
2020/07/19 DOTA
[54:58]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第一场 11.25
2020/11/25 DOTA
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
Python3批量生成带logo的二维码方法
2019/06/24 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
Python替换NumPy数组中大于某个值的所有元素实例
2020/06/08 Python
python中加背景音乐如何操作
2020/07/19 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
倩碧美国官网:Clinique美国
2016/07/20 全球购物
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
sealed修饰符是干什么的
2012/10/23 面试题
新农村建设典型材料
2014/05/31 职场文书
乡党政领导班子群众路线教育实践活动个人对照检查材料
2014/09/20 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书
疾病证明书
2015/06/19 职场文书
python实现自定义日志的具体方法
2021/05/28 Python