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 相关文章推荐
Dojo之路:如何利用Dojo实现Drag and Drop效果
Apr 10 Javascript
js实现网站首页图片滚动显示
Feb 04 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
javascript实现行拖动的方法
May 27 Javascript
JavaScript中将数组进行合并的基本方法讲解
Mar 07 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
Dec 19 Javascript
AngularJS读取JSON及XML文件的方法示例
May 25 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
Mar 11 Javascript
15 分钟掌握vue-next响应式原理
Oct 13 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
我的论坛源代码(一)
2006/10/09 PHP
php数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
PHP学习之字符串比较和查找
2011/04/17 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
PHP6新特性分析
2016/03/03 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
Javascript 跨域访问解决方案
2009/02/14 Javascript
JavaScript 格式字符串的应用
2010/03/29 Javascript
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
Jquery实现顶部弹出框特效
2015/08/08 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
浅谈javascript的闭包
2017/01/23 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
Python使用sftp实现上传和下载功能(实例代码)
2017/03/14 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
Python判断telnet通不通的实例
2019/01/26 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
Python中Numpy mat的使用详解
2019/05/24 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
为什么如下的代码int a=100,b=100;long int c=a * b;不能工作
2013/11/29 面试题
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
Java基础知识面试题
2014/03/25 面试题
2014年班长个人工作总结
2014/11/14 职场文书
请客吃饭开场白
2015/06/01 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
《异世界四重奏》剧场版6月10日上映 PV视觉图原创角色发表
2022/03/20 日漫
JS前端宏任务微任务及Event Loop使用详解
2022/07/23 Javascript