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+jquery等)
Mar 24 Javascript
JavaScript作用域链示例分享
May 27 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
Feb 26 Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 Javascript
ECharts仪表盘实例代码(附源码下载)
Feb 18 Javascript
js获取所有checkbox的值的简单实例
May 30 Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 Javascript
ES2015 Symbol 一种绝不重复的值
Dec 25 Javascript
浅谈bootstrap layer.open中end的使用方法
Sep 12 Javascript
uni-app 支持多端第三方地图定位的方法
Jan 03 Javascript
小程序中手机号识别的示例
Dec 14 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
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
一道求$b相对于$a的相对路径的php代码
2010/08/08 PHP
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
PHP实现文件下载详解
2014/11/27 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
PHP示例演示发送邮件给某个邮箱
2019/04/03 PHP
番茄的表单验证类代码修改版
2008/07/18 Javascript
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
js中获取事件对象的方法小结
2011/03/13 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
使用JS动态显示文本
2017/09/09 Javascript
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
工作中常用到的ES6语法
2018/09/04 Javascript
js实现简单模态框实例
2018/11/16 Javascript
如何优雅地取消 JavaScript 异步任务
2020/03/22 Javascript
使用Python的Treq on Twisted来进行HTTP压力测试
2015/04/16 Python
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
python+os根据文件名自动生成文本
2019/03/21 Python
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
Python函数的默认参数设计示例详解
2019/12/01 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
详解CSS3中@media的实际使用
2015/08/04 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
2019/11/13 HTML / CSS
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
2015会计试用期工作总结
2014/12/12 职场文书
匿名检举信范文
2015/03/02 职场文书
争做文明公民倡议书
2019/06/24 职场文书