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 页面只自动刷新一次
Jul 10 Javascript
jquery禁用右键示例
Apr 28 Javascript
从零学JSON之JSON数据结构
May 19 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
JavaScript多并发问题如何处理
Oct 28 Javascript
JavaScript阻止回车提交表单的方法
Dec 30 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
Mar 01 Javascript
使用 jQuery 实现表单验证功能
Jul 05 jQuery
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
微信内置浏览器图片查看器的代码实例
Oct 08 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
在IIS上安装PHP4.0正式版
2006/10/09 PHP
php中如何防止表单的重复提交
2013/08/02 PHP
PHP命令行脚本接收传入参数的三种方式
2014/08/20 PHP
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
Jquery 高亮显示文本中重要的关键字
2009/12/24 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
javascript实现简易计算器
2017/02/01 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
详解JSON Web Token 入门教程
2018/07/30 Javascript
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
Python语言描述连续子数组的最大和
2018/01/04 Python
python tornado微信开发入门代码
2018/08/24 Python
python实现超市商品销售管理系统
2019/11/22 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
Python基于Tensor FLow的图像处理操作详解
2020/01/15 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
HTML里显示pdf、word、xls、ppt的方法示例
2020/04/14 HTML / CSS
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
加拿大留学自荐信
2014/01/28 职场文书
妇联领导班子剖析材料
2014/08/21 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
经典导游欢迎词
2015/01/26 职场文书
员工自我评价范文
2015/03/11 职场文书
个人收入证明范本
2015/06/12 职场文书
python 管理系统实现mysql交互的示例代码
2021/12/06 Python