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 字符串乘法
Aug 20 Javascript
jquery 最简单的属性菜单
Oct 08 Javascript
ajax 缓存 问题 requestheader
Aug 01 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
Aug 25 Javascript
jQuery动态生成不规则表格(前后端)
Feb 21 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
详解使用React进行组件库开发
Feb 06 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
全国FM电台频率大全 - 10 江苏省
2020/03/11 无线电
php.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
php获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
2020/02/24 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
js数组中去除重复值的几种方法
2020/08/03 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
vant中的toast层级改变操作
2020/11/04 Javascript
vue下拉刷新组件的开发及slot的使用详解
2020/12/23 Vue.js
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
编程语言Python的发展史
2014/09/26 Python
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
python中urlparse模块介绍与使用示例
2017/11/19 Python
python绘制条形图方法代码详解
2017/12/19 Python
pycharm 激活码及使用方式的详细教程
2020/05/12 Python
python包的导入方式总结
2021/03/02 Python
粉红色的鲸鱼:Vineyard Vines
2018/02/17 全球购物
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
财务会计实习报告体会
2013/12/20 职场文书
倡议书范文格式
2014/05/12 职场文书
无毒社区工作方案
2014/05/23 职场文书
小学清明节活动总结
2014/07/04 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android