热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要介绍了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


推荐阅读
  • 深入理解SAP Fiori及其核心概念
    本文详细介绍了SAP Fiori的基本概念、发展历程、核心特性、应用类型、运行环境以及开发工具等,旨在帮助读者全面了解SAP Fiori的技术框架和应用场景。 ... [详细]
  • 本文旨在介绍Three.js的基础概念及其应用场景。Three.js是一个基于WebGL的JavaScript库,用于在网页上创建和显示3D图形。文中将从Canvas的基本功能出发,探讨其局限性,并引出WebGL及Three.js的解决方案。 ... [详细]
  • 本文探讨了通过数组操作、事件委托、插件化开发、字符串拼接优化、HTML5 Data属性的使用、优先采用原生JavaScript以及JavaScript文件的压缩等方法,来提升jQuery应用程序的性能。 ... [详细]
  • 本文详细介绍了HTML5的核心特性,包括新增的表单元素与验证API、多媒体处理(如视频和音频)、Canvas绘图技术以及新的API(例如拖拽功能和Web存储)等。 ... [详细]
  • DOM 属性快速参考指南
    本文档提供了一系列常用的 DOM 属性及其用法说明,旨在帮助开发者快速理解和应用这些属性。 ... [详细]
  • 精选10款jQuery内联编辑插件
    本文精选了10款优秀的jQuery内联编辑插件,旨在帮助开发者实现页面内容的动态管理和即时编辑,提升用户体验。 ... [详细]
  • 本文探讨了缓存系统中的两个关键问题——缓存穿透与缓存失效时的雪崩效应,以及这些问题的解决方案。此外,文章还介绍了数据处理、数据库拆分策略、缓存优化、拆分策略、应用架构演进及通信协议的选择等内容。 ... [详细]
  • 如何清空Layui树结构
    本文将详细介绍如何使用Layui框架清空树形结构,包括创建树、添加节点以及实现清空功能的具体步骤。通过本文,您将能够掌握Layui树的管理技巧。 ... [详细]
  • 深入解析 Android 中的 ActivityGroup 实现
    本文详细探讨了如何在 Android 应用中使用 ActivityGroup 来实现类似微博客户端主界面的效果,并分析了 TabActivity 的局限性,推荐使用更为灵活的 ActivityGroup 方案。 ... [详细]
  • django项目中使用手机号登录
    本文使用聚合数据的短信接口,需要先获取到申请接口的appkey和模板id项目目录下创建ubtils文件夹,定义返回随机验证码和调取短信接口的函数function.py文件se ... [详细]
  • 匠心|传统_2021年度总结 | 葡萄城软件开发技术回顾(上)
    匠心|传统_2021年度总结 | 葡萄城软件开发技术回顾(上) ... [详细]
  • jquery java 文件上传_jQuery文件上传
    插件描述:这是一个文件上传的展示,看很多插件,并不满意就自己写了一个,可能兼容性不是很好,没有准确进行测试过& ... [详细]
  • 解决jQuery Spinner按钮垂直排列问题
    本文探讨了如何通过CSS调整jQuery Spinner组件中的上下按钮,实现它们的垂直堆叠布局。 ... [详细]
  • 使用jQuery与百度地图API实现地址转经纬度功能
    本文详细介绍了如何利用jQuery和百度地图API将地址转换为经纬度,包括申请API密钥、页面构建及核心代码实现。 ... [详细]
  • 我在尝试将组合框转换为具有自动完成功能时遇到了一个问题,即页面上的列表框也被转换成了自动完成下拉框,而不是保持原有的多选列表框形式。 ... [详细]
author-avatar
qyfdxlwb
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有