详解jQuery向动态生成的内容添加事件响应jQuery live()方法


Posted in Javascript onNovember 02, 2015

jQuery live()方法是给所有匹配的元素附加一个事件处理函数,即使这个元素是以后通过append,prepend,after等事件生成后的内容也依然有效。
这个方法可以看做是 .bind() 方法的一个变体。使用 .bind() 时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。比如说:

<body> 
<div class="clickme">Click here</div> 
</body>

可以给这个元素绑定一个简单的click事件:

$('.clickme').bind('click', function() { alert(3water.com); });

 当点击了元素,就会弹出一个警告框。然后,想象一下这之后有另一个元素添加进来了。
$('body').append('<div class="clickme">Another target</div>');

尽管这个新的元素也能够匹配选择器 ".clickme" ,但是由于这个元素是在调用 .bind() 之后添加的,所以点击这个元素不会有任何效果。
但live() 就提供了对应这种情况的方法。如果我们是这样绑定click事件的:
$('.clickme').live('click', function() { alert("3water.com"); });

这样点击新增的元素,它依然能够触发事件处理函数。
事件委托
live() 方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 live() 的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上。
在我们的例子中,当点击新的元素后,会依次发生下列步骤:
1、生成一个click事件传递给 <div> 来处理。
2、由于没有事件处理函数直接绑定在 <div> 上,所以事件冒泡到DOM树上。
3、事件不断冒泡一直到DOM树的根节点,默认情况下上面绑定了这个特殊的事件处理函数。
4、执行由 .live() 绑定的特殊的 click 事件处理函数。
5、这个事件处理函数首先检测事件对象的 target 来确定是不是需要继续。
6、这个测试是通过检测 $(event.target).closest('.clickme') 能否找到匹配的元素来实现的。
7、如果找到了匹配的元素,那么调用原始的事件处理函数。
8、由于只有在事件发生时才会在上面的第五步里做测试,因此在任何时候添加的元素都能够响应这个事件。
以上就是对jQuery向动态生成的内容添加事件响应jQuery live()方法的详细介绍,希望对大家的学习有所帮助。
Javascript 相关文章推荐
用 javascript 实现的点击复制代码
Mar 24 Javascript
小议javascript 设计模式 推荐
Oct 28 Javascript
Ajax 数据请求的简单分析
Apr 05 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
Feb 02 Javascript
js微信扫描二维码登录网站技术原理
Dec 01 Javascript
前端页面文件拖拽上传模块js代码示例
May 19 Javascript
使用FileReader API创建Vue文件阅读器组件
Apr 03 Javascript
vue 自定义组件的写法与用法详解
Mar 04 Javascript
vue数据更新UI不刷新显示的解决办法
Aug 06 Javascript
vue组件中实现嵌套子组件案例
Aug 31 Javascript
vue离开当前页面触发的函数代码
Sep 01 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 #Javascript
JS实现超简单的鼠标拖动效果
Nov 02 #Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 #Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 #Javascript
12个超实用的JQuery代码片段
Nov 02 #Javascript
JavaScript Length 属性的总结
Nov 02 #Javascript
基于Jquery实现万圣节快乐特效
Nov 01 #Javascript
You might like
PHP取整数函数常用的四种方法小结
2012/07/05 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
Laravel5.5 视图 - 创建视图和数据传递示例
2019/10/21 PHP
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
JS使用正则表达式提交页面验证的代码
2019/10/16 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
vue fetch中的.then()的正确使用方法
2020/04/17 Javascript
vue-cli3 热更新配置操作
2020/09/18 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
python环形单链表的约瑟夫问题详解
2018/09/27 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
英国Amara家居法国网站:家居装饰,现代装饰和豪华礼品
2016/12/15 全球购物
毕业生精彩的自我评价分享
2013/10/06 职场文书
公司财务工作总结的自我评价
2013/11/23 职场文书
音乐教师求职信
2014/06/28 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
小学安全汇报材料
2014/08/14 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
2020年个人安全保证书参考模板
2020/01/08 职场文书