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中获取元素索引的函数
Sep 10 Javascript
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 Javascript
JQuery操作单选按钮以及复选按钮示例
Sep 23 Javascript
Javascript加载速度慢的解决方案
Mar 11 Javascript
使用javascript实现判断当前浏览器
Apr 14 Javascript
JS代码实现table数据分页效果
May 26 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
Javascript获取某个月的天数
May 30 Javascript
vue实现随机验证码功能的实例代码
Apr 30 Javascript
记录一次websocket封装的过程
Nov 23 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
基于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与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
PHP 日常开发小技巧
2009/09/23 PHP
php addslashes和mysql_real_escape_string
2010/01/24 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
angularjs指令中的compile与link函数详解
2014/12/06 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
2016/07/25 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
bootstrap confirmation按钮提示组件使用详解
2017/08/22 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
详解Puppeteer 入门教程
2018/05/09 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
微信小程序-form表单提交代码实例
2019/04/29 Javascript
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
详解重置Django migration的常见方式
2019/02/15 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
python获取命令行参数实例方法讲解
2020/11/02 Python
python实现简单猜单词游戏
2020/12/24 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
毕业自我评价范文
2013/11/17 职场文书
优秀毕业生求职推荐信范文
2013/11/21 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
出纳岗位职责
2015/01/31 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
pytorch 使用半精度模型部署的操作
2021/05/24 Python
Python捕获、播放和保存摄像头视频并提高视频清晰度和对比度
2022/04/14 Python