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 相关文章推荐
javascript 清空form表单中某种元素的值
Dec 26 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
JS实现自动阅读单词(有道单词本添加功能)
Nov 14 Javascript
用iframe实现不刷新整个页面上传图片的实例
Nov 18 Javascript
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
js保留两位小数方法总结
Jan 31 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
微信小程序实现复选框效果
Dec 28 Javascript
vue 项目 iOS WKWebView 加载
Apr 17 Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 Javascript
JavaScript布尔运算符原理使用解析
May 06 Javascript
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
PHP输出缓存ob系列函数详解
2014/03/11 PHP
php检测url是否存在的方法
2015/04/14 PHP
php开发工具有哪五款
2015/11/09 PHP
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
获取body标签的两种方法
2011/10/13 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
深入探究node之Transform
2017/07/20 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
2019/10/16 jQuery
Python装饰器使用示例及实际应用例子
2015/03/06 Python
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
Python 性能优化技巧总结
2016/11/01 Python
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
Python中文编码知识点
2019/02/18 Python
python pandas生成时间列表
2019/06/29 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
Python中logger日志模块详解
2020/08/04 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
曼联官方网上商店:Manchester United Direct
2017/07/28 全球购物
软件缺陷的分类都有哪些
2014/08/22 面试题
EJB面试题
2015/07/28 面试题
房展策划方案
2014/06/07 职场文书
民族学专业大学生职业规划范文:清晰未来的构想
2014/09/20 职场文书
2014年法院工作总结
2014/11/24 职场文书
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android