jQuery1.9+中删除了live以后的替代方法

更新时间：2016年06月17日 10:38:48 作者：入海数沙

这篇文章主要介绍了jQuery1.9+中删除了live以后的替代方法的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下

根据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

您可能感兴趣的文章:

jquery 1.4.2发布！主要是性能与API
没想到jquery这次居然更新这么快，jquery1.4的教程我还没有发二周，jquery1.4.2就发布了。这次jquery1.4.2更新的内容主要是性能和新增了一些新的API。
2010-02-02
jquery判断checkbox(复选框)是否被选中的代码
现在很多朋友都喜欢使用jquery了，所以很多的表格判断都是基于jquery的，但实现方法与javascript原生代码不同，对于checkbox的判断大家可以参考下。
2010-10-10
用jquery实现动画跳到顶部和底部(这个比较简单)
用jquery实现动画的跳到顶部和底部，当点击顶部按钮的时候，执行方法,scrollTop属性获取选中标签距滚动条的距离
2014-09-09
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
从上篇文章，我们实现了Table分页代码的高效性，咱们继续沿着这个思路，探讨Table表格数据中另外一个很常见的排序问题。说到排序，我记得在asp.net中 GridView中提供了这样的方便，只需在展示字段上加上 Sorting 这样的属性，基本就完成了，剩下就是服务端cs代码的写法了。
2010-01-01
Jquery实现显示和隐藏的4种简单方式
显示和隐藏的效果想必大家都有见到过吧，其实很简单，通过jquery便可轻松实现，下面为大家整理了4种方式，大家可以根据需求自由选择
2013-08-08
很酷的60款jQuery 幻灯片演示和下载
jQuery 是一个非常优秀的 JavaScript 框架，使用简单灵活，同时还有许多成熟的插件可供选择，它可以帮助你在项目中加入漂亮的效果，其中之一就是幻灯片效果的实现，这是一种在有限的网页空间内展示系列项目时非常好的方法
2012-05-05
各式各样的导航条效果css3结合jquery代码实现
这篇文章主要为大家分享了css3结合jquery代码实现各式各样的导航条效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09
jQueryUI的Dialog的简单封装
这几天在做一个交互的原型，第一次大量采用jQueryUI，确实非常方便好用，其中一些功能点用到了弹出确认提示框，看了jQueryUI Dialog的例子，效果还不错，就是用起来有点儿别扭
2010-06-06
分享20款美化网站的 jQuery Lightbox 灯箱插件
这篇文章主要介绍了分享20款美化网站的 jQuery Lightbox 灯箱插件,需要的朋友可以参考下
2014-10-10
jQuery中:radio选择器用法实例
这篇文章主要介绍了jQuery中:radio选择器用法,实例分析了:radio选择器的功能、定义及匹配单选按钮的使用技巧,需要的朋友可以参考下
2015-01-01

jQuery1.9+中删除了live以后的替代方法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具