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 函数参数限制说明
Nov 19 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
拥有一个属于自己的javascript表单验证插件
Mar 24 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
AngularJS辅助库browserTrigger用法示例
Nov 03 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
react开发教程之React 组件之间的通信方式
Aug 12 Javascript
JS实现的3des+base64加密解密算法完整示例
May 18 Javascript
vue中created和mounted的区别浅析
Aug 13 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 06 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 Javascript
JS class语法糖的深入剖析
Jul 07 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递归删除目录几个代码实例
2014/04/21 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
Div Select挡住的解决办法
2008/08/07 Javascript
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
2013/11/19 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
使用CoffeeScrip优美方式编写javascript代码
2015/10/28 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
Python处理JSON数据并生成条形图
2016/08/05 Python
利用python批量检查网站的可用性
2016/09/09 Python
利用django如何解析用户上传的excel文件
2017/07/24 Python
pandas series序列转化为星期几的实例
2018/04/11 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
python 集合 并集、交集 Series list set 转换的实例
2018/05/29 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
Python中浅拷贝copy与深拷贝deepcopy的简单理解
2018/10/26 Python
浅谈Python大神都是这样处理XML文件的
2019/05/31 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
Python使用Pandas库常见操作详解
2020/01/16 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
PyQt5+python3+pycharm开发环境配置教程
2020/03/24 Python
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
俄罗斯汽车零件和配件在线商店:CarvilleShop
2019/11/29 全球购物
口腔医学技术应届生求职信
2013/11/09 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
财务部岗位职责
2015/02/03 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang
MySQL的存储函数与存储过程的区别解析
2022/04/08 MySQL