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

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
live替代
jquery live 替代、jquery on 替代live、live 替代、jquery toggle 替代、替代jquery,以便于您获取更多的相关知识。

时间: 2024-07-29 01:02:20

jQuery1.9+中删除了live以后的替代方法_jquery的相关文章

jQuery EasyUI中的日期控件DateBox修改方法_jquery

jQuery EasyUI中的日期控件DateBox很好用的,首先需要引入jquery文件,代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic DateBox - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/cs

JQuery中DOM实现事件移除的方法_jquery

本文实例讲述了JQuery中DOM实现事件移除的方法.分享给大家供大家参考.具体如下: 可以为同一个元素绑定多个事件,也可以为多个元素绑定同一个事件.假设网页上有一个<button>元素,使用以下代码为该元素绑定多个相同的事件. $(function(){ $('#btn').bind("click", function(){ $('#test').append("<p>我的绑定函数1</p>"); }).bind("c

jQuery在ul中显示某个li索引号的方法_jquery

本文实例讲述了jQuery在ul中显示某个li索引号的方法.分享给大家供大家参考.具体分析如下: 这段代码不仅适用于ul和li的元素索引号查找,也适用于其它带有包含关系的元素索引号查找,方法非常的巧妙 $("ul > li").click(function () { // http://www.jb51.net var index = $(this).prevAll().length; //prevAll([expr]): 查找当前元素之前所有的同辈元素 }); 希望本文所述对大

jquery中ajax使用error调试错误的方法_jquery

本文实例讲述了jquery中ajax使用error调试错误的方法.分享给大家供大家参考.具体分析如下: JQuery使我们在开发Ajax应用程序的时候提高了效率,减少了许多兼容性问题,我们在Ajax项目中,遇到ajax异步获取数据出错怎么办,我们可以通过捕捉error事件来获取出错的信息. jquery中ajax的常用用法类似于: $(document).ready(function() { jQuery("#clearCac").click(function() { jQuery.a

jQuery实现将div中滚动条滚动到指定位置的方法_jquery

本文实例讲述了jQuery实现将div中滚动条滚动到指定位置的方法.分享给大家供大家参考,具体如下: 一.Js代码: onload = function () { //初始化 scrollToLocation(); }; function scrollToLocation() { var mainContainer = $('#thisMainPanel'), scrollToContainer = mainContainer.find('.son-panel:last');//滚动到<div

jquery中checkbox全选失效的解决方法_jquery

如果你使用jQuery 1.6 ,代码if ( $(elem).attr("checked") ),将获得一个属性(attribute) ,它不改变该复选框被选中和选中.它只是用来存储默认或选中属性的初始值.为了保持向后兼容,.attr() 方法从 jQuery 1.6.1+ 开始除了返回属性值外,还会更新 property 属性,因此 boolean attribute(布尔属性)不需要通过 .prop() 来改变其值.推荐使用上述方法之一,来取得 checked 的值. 使用jQu

jQuery在vs2008及js文件中的无智能提示的解决方法_jquery

jQuery在vs2008中的智能提示 1  安装VS2008SP1补丁 要确保您的vs2008已经打了sp1补丁,在vs2008的帮助里的关于,要是安装了sp1,会出现"版本 3.5 sp1",没安装当然就只有"版本 3.5". 如果没有安装可以在这下载sp1. 2  安装VS 2008 Patch KB958502以支持"-vsdoc.js"Intellisense文件.该补丁会导致Visual Studio在一个JavaScript库被引用

jquery 1.3.2 IE8中的一点点的小问题解决方法_jquery

使用的时候是这个样子的: 复制代码 代码如下: var _val = $("input[name='input1'][checked]").val(); 结果发现_val的值为undefined,开始还以为写的不对,可检查没有问题,这样写在IE6.7.FF.Chrome.Opera.Safari中都可以正常的得到值,就是在IE8中不行.百思不得其解,后来又实验: 复制代码 代码如下: var _val = $("input[name='input1']").eq(0

jquery.ajax的url中传递中文乱码问题的解决方法_jquery

JQuery JQuery默认的contentType:application/x-www-form-urlencoded 这才是JQuery正在乱码的原因,在未指定字符集的时候,是使用ISO-8859-1 ISO8859-1,通常叫做Latin-1.Latin-1包括了书写所有西方欧洲语言不可缺少的附加字符. JQuery的Ajax根本没有考虑到国际化的问题,使用了欧洲的字符集,所以才引起了传递中文出现乱码的问题. 而我们的UTF-8则可以解决这一问题. 最终指需要修改JQuery的代码,显式