首页 web前端 js教程 jQuery1.9以上版本中删除了live以后的替代方法具体介绍

jQuery1.9以上版本中删除了live以后的替代方法具体介绍

Jun 26, 2017 am 09:31 AM
live 版本

根据jQuery的官方描述,live方法在1.7中已经不建议使用,在1.9中删除了这个方法。并建议在以后的代码中使用on方法来替代。
  on方法可以接受三个参数:事件名、触发选择器、事件函数。

需要特别注意的是:on方法中间的这个触发选择器就是你将要添加的HTML元素的类名、id或者元素名,使用它就可以实现live的效果。

例如我的html文档中已经有了一个id为parent的p,我将要在这个p内部再动态添加一个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("p").live("click",function(){
  alert("x");
}).addClass("x");//jQuery1.9+$("#panel").on("click","p",function(){
  alert("x");
}).find("p").addClass("x");   
登录后复制

注意最后的find("p"),其它就没什么问题了。

以上是jQuery1.9以上版本中删除了live以后的替代方法具体介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何快速查看numpy版本 如何快速查看numpy版本 Jan 19, 2024 am 08:23 AM

Numpy是Python中一个重要的数学库,它提供了高效的数组操作和科学计算函数,被广泛应用于数据分析、机器学习、深度学习等领域。在使用numpy过程中,我们经常需要查看numpy的版本号,以便确定当前环境所支持的功能。本文将介绍如何快速查看numpy版本,并提供具体的代码示例。方法一:使用numpy自带的__version__属性numpy模块自带一个__

如何查看maven版本 如何查看maven版本 Jan 17, 2024 pm 05:06 PM

查看maven版本的方法:1、使用命令行;2、查看环境变量;3、使用IDE;4、查看pom.xml文件。详细介绍:1、使用命令行,在命令行中输入"mvn -v"或"mvn --version",然后按回车,这将显示Maven的版本信息以及Java的版本信息;2、查看环境变量,在某些系统上,可以查看环境变量来找到Maven的版本信息,在命令行中输入命令,然后回车等等。

Linux下更新curl版本教程! Linux下更新curl版本教程! Mar 07, 2024 am 08:30 AM

在Linux下更新curl版本,您可以按照以下步骤进行操作:检查当前curl版本:首先,您需要确定当前系统中安装的curl版本。打开终端,并执行以下命令:curl--version该命令将显示当前curl的版本信息。确认可用的curl版本:在更新curl之前,您需要确定可用的最新版本。您可以访问curl的官方网站(curl.haxx.se)或相关的软件源,查找最新版本的curl。下载curl源代码:使用curl或浏览器,下载您选择的curl版本的源代码文件(通常为.tar.gz或.tar.bz2

查看麒麟操作系统版本和内核版本 查看麒麟操作系统版本和内核版本 Feb 21, 2024 pm 07:04 PM

查看麒麟操作系统版本和内核版本在麒麟操作系统中,了解如何查看系统版本和内核版本是进行系统管理和维护的基础。查看麒麟操作系统版本方法一:使用/etc/.kyinfo文件要查看麒麟操作系统的版本,您可以查看/etc/.kyinfo文件。此文件包含了操作系统的版本信息。执行以下命令:cat/etc/.kyinfo此命令将显示操作系统的详细版本信息。方法二:使用/etc/issue文件另一个查看操作系统版本的方法是通过查看/etc/issue文件。这个文件同样提供了版本信息,但可能不如.kyinfo文件

更新pip版本的简单步骤:1分钟内完成 更新pip版本的简单步骤:1分钟内完成 Jan 27, 2024 am 09:45 AM

一分钟搞定:如何更新pip版本,需要具体代码示例随着Python的快速发展,pip成为了Python包管理的标准工具。然而,随着时间的推移,pip版本也在不断更新,为了能够使用最新的功能和修复可能的安全漏洞,更新pip版本是非常重要的。本文将介绍如何在一分钟内快速更新pip,并提供具体的代码示例。首先,我们需要打开命令行窗口。在Windows系统中,可以使用

如何轻松查看Oracle的安装版本 如何轻松查看Oracle的安装版本 Mar 07, 2024 am 11:27 AM

如何轻松查看Oracle的安装版本,需要具体代码示例作为一款被广泛应用于企业级数据库管理系统的软件,Oracle数据库具有许多版本和不同的安装方式。在日常工作中,我们经常需要查看Oracle数据库的安装版本,以便进行相应的操作和维护。本文将介绍如何轻松地查看Oracle的安装版本,并给出具体的代码示例。方法一:通过SQL查询在Oracle数据库中,我们可以通

dp接口怎么看1.2还是1.4 dp接口怎么看1.2还是1.4 Feb 06, 2024 am 10:27 AM

DP接口是电脑里面一个重要的接口线,有很多用户在使用电脑的时候,想要知道怎么样可以查看DP接口是1.2还是1.4的,其实只需要在GPU-Z中就可以看。dp接口怎么看1.2还是1.4:1、首先在GPU-Z中选择“Advanced”。2、再看“Advanced”下面“General”中的“Monitor1”,可以看“LinkRate(current)”和“Lanes(current)”这两项。3、最后如果显示8.1Gbps×4,就是DP1.3版本以上,一般都是DP1.4,如果是5.4Gbps×4,则

解读PHP版本NTS的含义与区别 解读PHP版本NTS的含义与区别 Mar 27, 2024 am 11:48 AM

PHP版本NTS的含义与区别PHP是一种流行的服务器端脚本语言,广泛应用于Web开发领域。PHP有两种主要的版本:ThreadSafe(TS)和Non-ThreadSafe(NTS)。在PHP的官方网站上,我们可以看到两个不同的PHP下载版本,分别是PHPNTS和PHPTS。那么,PHP版本NTS是什么意思?它和TS版本有什么区别呢?接下来,

See all articles