JQuery live函数


Posted in Javascript onDecember 24, 2010

摘自 jQuery 1.4.1 中文参考:

事件委托

.live() 方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 .live() 的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上。在我们的例子中,当点击新的元素后,会依次发生下列步骤:

  1. 生成一个click事件传递给 <div> 来处理
  2. 由于没有事件处理函数直接绑定在 <div> 上,所以事件冒泡到DOM树上
  3. 事件不断冒泡一直到DOM树的根节点,默认情况下上面绑定了这个特殊的事件处理函数。
  4. 执行由 .live() 绑定的特殊的 click 事件处理函数。
  5. 这个事件处理函数首先检测事件对象的 target 来确定是不是需要继续。这个测试是通过检测 $(event.target).closest('.clickme') 能否找到匹配的元素来实现的。
  6. 如果找到了匹配的元素,那么调用原始的事件处理函数。

由于只有在事件发生时才会在上面的第五步里做测试,因此在任何时候添加的元素都能够响应这个事件

Javascript 相关文章推荐
IE6与IE7中,innerHTML获取param的区别
Mar 15 Javascript
JavaScript 原型继承
Dec 26 Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
Oct 30 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
Dec 25 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
Jun 12 Javascript
浅谈Node.js:fs文件系统模块
Dec 08 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
Sep 12 Javascript
JavaScript实现图片上传并预览并提交ajax
Sep 30 Javascript
JavaScript中while循环的基础使用教程
Aug 11 Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
jquery 单击li防止重复加载的实现代码
Dec 24 #Javascript
基于jquery的关于动态创建DOM元素的问题
Dec 24 #Javascript
在JavaScript中获取请求的URL参数
Dec 22 #Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
Dec 22 #Javascript
jQuery Clone Bug解决代码
Dec 22 #Javascript
修改jquery.lazyload.js实现页面延迟载入
Dec 22 #Javascript
jquery插件 autoComboBox 下拉框
Dec 22 #Javascript
You might like
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
PHP安装攻略:常见问题解答(一)
2006/10/09 PHP
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
ThinkPHP防止重复提交表单的方法实例分析
2018/05/10 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
jquery 卷帘效果实现代码(不同方向)
2013/02/05 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
React-intl 实现多语言的示例代码
2017/11/03 Javascript
vue的mixins属性详解
2018/03/14 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
原生js实现点击按钮复制内容到剪切板
2020/11/19 Javascript
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
Python通过poll实现异步IO的方法
2015/06/04 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
python cs架构实现简单文件传输
2020/03/20 Python
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
Python新手学习函数默认参数设置
2020/06/03 Python
台湾团购、宅配和优惠券:17Life
2017/08/14 全球购物
SQL Server面试题
2016/10/17 面试题
西式婚礼主持词
2014/03/13 职场文书
优秀的个人求职信范文
2014/05/09 职场文书
施工工地安全标语
2014/06/07 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
2015年国税春训心得体会
2015/03/09 职场文书
培训后的感想
2015/08/07 职场文书
详解Django中 render() 函数的使用方法
2021/04/22 Python
HTML+VUE分页实现炫酷物联网大屏功能
2021/05/27 Vue.js