jquery live()重复绑定的解决方法介绍
Query中.live()方法的使用方法
今天在写代码的时候遇到一个问题，直接上代码看：
$(function(){
$(".file").live("click",function(){
var task_name=$(this).text();
$("#selecting tbody").append("<trclass=gradeA'><tdclass='center'>"+task_name+"</td></tr>");
});
});
$(".file")对象是从后台传过来的，click肯定是不行的，bind（）也无法获取动态添加的元素，因此只能用live（），但是使用live（）遇到的问题是表格行会莫名其妙的添加了两行，即绑定事件重复执行了，纠结了一上午终于找到了原因，先看live()方法的介绍。
live(type, [data],fn)
概述
jQuery给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。
这个方法是基本是的 .bind() 方法的一个变体。使用 .bind()时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。比如说
<body>
<div class="clickme">Clickhere</div>
<body>
可以给这个元素绑定一个简单的click事件：
$('.clickme').bind('click', function() {
alert("Bound handler called.");
});
当点击了元素，就会弹出一个警告框。
然后，想象一下这之后有另一个元素添加进来了。
$('body').append('<div class="clickme">Another target</div>');
尽管这个新的元素也能够匹配选择器".clickme" ，但是由于这个元素是在调用 .bind() 之后添加的，所以点击这个元素不会有任何效果。
.live()就提供了对应这种情况的方法。如果我们是这样绑定click事件的：
$('.clickme').live('click', function() {
alert("Live handler called.");
});
然后再添加一个新元素：
$('body').append('<divclass="clickme">Anothertarget</div>');
然后再点击新增的元素，他依然能够触发事件处理函数。
事件委托
.live()方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委托：绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。
传递给 .live()的事件处理函数不会绑定在元素上，而是把他作为一个特殊的事件处理函数，绑定在 DOM树的根节点上。在我们的例子中，当点击新的元素后，会依次发生下列步骤：
1、生成一个click事件传递给<div> 来处理
2、由于没有事件处理函数直接绑定在 <div>上，所以事件冒泡到DOM树上
3、事件不断冒泡一直到DOM树的根节点，默认情况下上面绑定了这个特殊的事件处理函数。
4、执行由 .live()绑定的特殊的 click 事件处理函数。
5、这个事件处理函数首先检测事件对象的 target 来确定是不是需要继续。这个测试是通过检测$(event.target).closest('.clickme') 能否找到匹配的元素来实现的。
6、如果找到了匹配的元素，那么调用原始的事件处理函数。
由于只有在事件发生时才会在上面的第五步里做测试，因此在任何时候添加的元素都能够响应这个事件。
附加说明
.live()虽然很有用，但由于其特殊的实现方式，所以不能简单的在任何情况下替换 .bind()。主要的不同有：
在jQuery 1.4中，.live()方法支持自定义事件，也支持所有的JavaScript 事件。在jQuery 1.4.1中，甚至也支持 focus 和 blue事件了（映射到更合适，并且可以冒泡的focusin和focusout上）。
另 外，在jQuery1.4.1中，也能支持hover（映射到"mouseenter mouseleave"）。然而在jQuery1.3.x中，只支持支持的JavaScript事件和自定义事件：click, dblclick, keydown, keypress,keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup.
.live()并不完全支持通过DOM遍历的方法找到的元素。取而代之的是，应当总是在一个选择器后面直接使用 .live()方法，正如前面例子里提到的。
当一个事件处理函数用 .live()绑定后，要停止执行其他的事件处理函数，那么这个函数必须返回 false。 仅仅调用 .stopPropagation()无法实现这个目的。
参考 .bind() 方法可以获得更多关于事件绑定的信息。
在jQuery 1.4.1中，你可以一次绑定多个事件给 .live() ，跟.bind() 提供的功能类似。
在jQuery 1.4中，data参数可以用于把附加信息传递给事件处理函数。一个很好的用处是应付由闭包导致的问题。可以参考 .bind()的讨论来获得更多信息。
参数
typeString 事件类型
data(可选) Object 欲绑定的事件处理函数
fn Function 欲绑定的事件处理函数
示例
HTML 代码:
<p>Clickme!</p>
jQuery 代码:
$("p").live("click", function(){
$(this).after("<p>Anotherparagraph!</p>");
});
描述:
阻止默认事件行为和事件冒泡，返回false
jQuery 代码:
$("a").live("click",function() { return false; });
//根本原因在这，需要阻止默认事件行为和事件冒泡，在代码后面添加return false;就OK了
描述:
仅仅阻止默认事件行为
jQuery 代码:
$("a").live("click", function(event){
event.preventDefault();
});
相关文章
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Promises是一种令代码异步行为更加优雅的抽象，它很有可能是JavaScript的下一个编程范式，一个Promise即表示任务结果，无论该任务是否完成。本文以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题，需要的朋友参考下2015-11-11
延迟执行在某些特殊的情况下还是蛮有用的，实现的方法也很简单，本文有个不错的示例，有需要的朋友可以参考下，希望对大家有所帮助2013-08-08
在IE10以上版本，微软为了提高IE输入框的便利性，增加了文本内容全部删除和密码眼睛功能，但是有些时候打开新的页面里，输入框却被锁定无法编辑，需要刷新一下页面，或者如果输入框有内容需要点击一下输入框后面的叉叉后才能输入，怎么解决呢，下面小编给大家解答下2016-10-10
下面小编就为大家带来一篇jQuery文字横向滚动效果的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
最近做前端设计时需要使左右两个DIV高度自适应。这其中的jquery代码中的获得高度用的clientHeight，介绍一下几种不同的获得方式以及他们的差别2012-08-08
jQuery插件能够增强网站的可用性，有效地改善用户体验，还可以大大减少创建一个新站点的开发时间。2010-12-12
本篇文章是对Jquery中LigerUi的弹出编辑框的实现方法进行了分析介绍，需要的朋友可以参考下2013-07-07
下面小编就为大家带来一篇浅谈jQuery 中的事件冒泡和阻止默认行为。小编举得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
本文依赖于jQuery,其中第一种，第二种方式是使用jQuery实现的，第三种方式是基于JS和DOM实现的，感兴趣的朋友可以了解下2013-12-12
这篇文章主要介绍了jQuery中常用的遍历函数用法,以实例形式分析并总结了jquery中常见的遍历函数使用方法与注意事项,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
最新评论