详解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 相关文章推荐
用按钮控制iframe显示的网页实现方法
Feb 04 Javascript
JS实现div内部的文字或图片自动循环滚动代码
Apr 19 Javascript
javascript跨域原因以及解决方案分享
Apr 08 Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
详解Node.js模板引擎Jade入门
Jan 19 Javascript
vue better-scroll插件使用详解
Jan 25 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 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生成Flash动画的实现代码
2010/03/12 PHP
PHP学习 变量使用总结
2011/03/24 PHP
PHP 验证码的实现代码
2011/07/17 PHP
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
php数组转换js数组操作及json_encode的用法详解
2013/10/26 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
window.name代替cookie的实现代码
2010/11/28 Javascript
js 静态动态成员 and 信息的封装和隐藏
2011/05/29 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
2013/08/23 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
详解js几个绕不开的事件兼容写法
2017/08/30 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
python去掉空白行的多种实现代码
2018/03/19 Python
python读取TXT每行,并存到LIST中的方法
2018/10/26 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
感恩母亲节演讲稿
2014/05/07 职场文书
承诺书格式范文
2014/06/03 职场文书
研究生简历自我评价范文
2014/09/13 职场文书
单身申明具结书
2015/02/26 职场文书
学生会任命书范本
2015/09/21 职场文书