详解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 相关文章推荐
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 Javascript
jQuery查询数据返回object和字符串影响原因是什么
Aug 09 Javascript
JS画线(实例代码)
Nov 20 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
jQuery实现别踩白块儿网页版小游戏
Jan 18 Javascript
微信小程序获取微信运动步数的实例代码
Jul 20 Javascript
jquery中done和then的区别(详解)
Dec 19 jQuery
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
Jan 18 Javascript
Javascript实现单选框效果
Dec 09 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_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
JavaScript 事件属性绑定带参数的函数
2009/03/13 Javascript
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
[01:31]完美与DOTA2历程
2014/07/31 DOTA
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
使用python爬取B站千万级数据
2018/06/08 Python
Apache,wsgi,django 程序部署配置方法详解
2019/07/01 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
python dataframe NaN处理方式
2019/12/26 Python
在python中修改.properties文件的操作
2020/04/08 Python
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
高中毕业自我鉴定范文
2013/10/02 职场文书
教师绩效考核方案
2014/01/21 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
一份文言文检讨书
2014/09/13 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
设置IIS Express并发数
2022/07/07 Servers