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 相关文章推荐
跨浏览器开发经验总结(四) 怎么写入剪贴板
May 13 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
Aug 15 Javascript
jQuery zclip插件实现跨浏览器复制功能
Nov 02 Javascript
Bootstrap每天必学之面板
Nov 30 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
Apr 07 Javascript
JavaScript中各数制转换全面总结
Aug 21 Javascript
vue引入jq插件的实例讲解
Sep 12 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 Javascript
seajs下require书写约定实例分析
May 16 Javascript
Babel 入门教程学习笔记
Jun 13 Javascript
LayUI表格批量删除方法
Aug 15 Javascript
微信小程序全局变量功能与用法详解
Jan 22 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默认安装产生系统漏洞
2006/10/09 PHP
测试您的 PHP 水平的题目
2007/05/30 PHP
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
详谈php ip2long 出现负数的原因及解决方法
2017/04/05 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
微信小程序之分享页面如何返回首页的示例
2018/03/28 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
Python面向对象之类的内置attr属性示例
2018/12/14 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
python实现数字炸弹游戏
2020/07/17 Python
css3的transition属性详解
2014/12/15 HTML / CSS
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
采购部部门职责
2013/12/15 职场文书
工程采购员岗位职责
2014/03/09 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
求职简历自荐信
2014/06/18 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
教师个人教学总结
2015/02/11 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
高中班长竞选稿
2015/11/20 职场文书
通知怎么写?
2019/04/17 职场文书
浅谈JavaScript作用域
2021/12/06 Javascript