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 相关文章推荐
取得传值的函数
Oct 27 Javascript
JavaScript 事件冒泡简介及应用
Jan 11 Javascript
JQuery 学习技巧总结
May 21 Javascript
详细解读AngularJS中的表单验证编程
Jun 19 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 Javascript
关于前后端json数据的发送与接收详解
Jul 30 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
详解ES6中的Map与Set集合
Mar 22 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
详解Vue中的Props与Data细微差别
Mar 02 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 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中关于普通表单多文件上传的处理方法
2011/03/25 PHP
php中将数组存到文件里的实现代码
2012/01/19 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
js表单序列化判断空值的实例
2017/09/22 Javascript
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
详解webpack之scss和postcss-loader的配置
2018/01/09 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
微信小程序实现自定义底部导航
2020/11/18 Javascript
JS实现百度搜索框
2021/02/25 Javascript
Django与遗留的数据库整合的方法指南
2015/07/24 Python
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
Python开发的HTTP库requests详解
2017/08/29 Python
python opencv读mp4视频的实例
2018/12/07 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
中医学专业自荐信范文
2014/04/01 职场文书
优秀教师单行材料
2014/12/16 职场文书
MySQL中一条update语句是如何执行的
2022/03/16 MySQL
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL
代码复现python目标检测yolo3详解预测
2022/05/06 Python
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server