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 相关文章推荐
你需要知道的JavsScript可以做什么?
Jun 29 Javascript
语义化 H1 标签
Jan 14 Javascript
Jquery带搜索框的下拉菜单
May 06 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
Dec 12 Javascript
jquery无刷新验证邮箱地址实现实例
Feb 19 Javascript
javascript操纵OGNL标签示例代码
Jun 16 Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 14 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
Dec 09 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中Socket创建与监听实现方法
2015/01/05 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
用javascript来实现动画导航效果的代码
2007/12/16 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
2015/11/02 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
vue中appear的用法
2017/08/17 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
12条写出高质量JS代码的方法
2018/01/07 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
初学Python函数的笔记整理
2015/04/07 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
python简单验证码识别的实现方法
2019/05/10 Python
cProfile Python性能分析工具使用详解
2019/07/22 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
Django之腾讯云短信的实现
2020/06/12 Python
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
美国传奇滑手Paul Rodriguez创办的街头滑板品牌:Primitive Skateboarding
2019/10/29 全球购物
企业面试题试卷附带答案
2015/12/20 面试题
会计师职业生涯规划范文
2014/02/18 职场文书
低碳环保演讲稿
2014/08/28 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
个人先进材料范文
2014/12/30 职场文书
2015年个人思想总结
2015/03/09 职场文书
热血教师观后感
2015/06/10 职场文书
职工宿舍管理制度
2015/08/05 职场文书
小学安全教育主题班会
2015/08/12 职场文书
团队拓展训练心得体会
2016/01/12 职场文书