详解jQuery向动态生成的内容添加事件响应jQuery live()方法
更新时间：2015年11月02日 10:31:25 投稿：lijiao
这篇文章主要介绍了jQuery向动态生成的内容添加事件响应jQuery live()方法，需要的朋友可以参考下
jQuery live()方法是给所有匹配的元素附加一个事件处理函数，即使这个元素是以后通过append,prepend,after等事件生成后的内容也依然有效。
这个方法可以看做是 .bind() 方法的一个变体。使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。比如说：
<body> <div class="clickme">Click here</div> </body>
可以给这个元素绑定一个简单的click事件：
复制代码 代码如下:
$('.clickme').bind('click', function() { alert(www.jb51.net); });
当点击了元素，就会弹出一个警告框。然后，想象一下这之后有另一个元素添加进来了。
复制代码 代码如下:
$('body').append('<div class="clickme">Another target</div>');
尽管这个新的元素也能够匹配选择器 ".clickme" ，但是由于这个元素是在调用 .bind() 之后添加的，所以点击这个元素不会有任何效果。
但live() 就提供了对应这种情况的方法。如果我们是这样绑定click事件的：
复制代码 代码如下:
$('.clickme').live('click', function() { alert("www.jb51.net"); });
这样点击新增的元素，它依然能够触发事件处理函数。
事件委托
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()方法的详细介绍，希望对大家的学习有所帮助。
相关文章
这篇文章主要介绍了jQuery实现表格行上移下移和置顶的方法,涉及jQuery操作页面元素的相关技巧,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了jQuery调用Webservice传递json数组的方法,实例分析了jQuery基于ajax与Webservice传递json数据的相关实现技巧,需要的朋友可以参考下2016-08-08
Jquery ui css framework是jquery ui中的一个样式框架，可以利用jquery Theme roller 来生成自己想要的css样式效果。我们可以利用jquery ui的一些框架来开发出基于jquery ui css framework效果的插件来。2010-06-06
这篇文章主要介绍了jQuery实现仿美橙互联两级导航菜单效果,以完整实例形式分析了jQuery响应鼠标事件实现针对页面元素的遍历及样式的动态操作技巧,需要的朋友可以参考下2015-09-09
为jquery的ajaxfileupload增加附加参数的方法
这篇文章主要介绍了为jquery的ajaxfileupload增加附加参数的方法,需要的朋友可以参考下2014-03-03
这篇文章主要为大家详细介绍了jQuery ajax实现省市县三级联动的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
使用jQuery来加载一个外部的 css 文件，首先创建一个 link 元素，并将它添加到 标记中即可。那么基于jquery代码如何实现呢？下面小编给大家介绍jQuery动态加载css文件实现方法，需要的朋友参考下吧2016-06-06
这篇文章主要介绍了jQuery源码中的循环技巧,包括各类选择、判断、遍历等等操作,非常实用的技巧,需要的朋友可以参考下2014-09-09
浅谈jquery fullpage 插件增加头部和版权的方法
下面小编就为大家分享一篇浅谈jquery fullpage 插件增加头部和版权的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看2018-03-03
jQuery-serialize()输出序列化form表单值的方法
jQuery-serialize()输出序列化表单值在工作中很常见也很实用，于是本人搜集整理了一些，需要了解的朋友可以详细参考下2012-12-12
最新评论