Introduction to the solution to repeated binding of jquery live()

Introduction to the solution to repeated binding of jquery live()_jquery

WBOY

Release： 2016-05-16 17:05:28

Original

911 people have browsed it

Query中.live()方法的使用方法

今天在写代码的时候遇到一个问题，直接上代码看：
$(function(){
           $(".file").live("click",function(){
                    var task_name=$(this).text();
                    $("#selecting tbody").append(""+task_name+"");
           });
    });

$(".file")对象是从后台传过来的，click肯定是不行的，bind（）也无法获取动态添加的元素，因此只能用live（），但是使用live（）遇到的问题是表格行会莫名其妙的添加了两行，即绑定事件重复执行了，纠结了一上午终于找到了原因，先看live()方法的介绍。

live(type, [data],fn)

概述

jQuery给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。

这个方法是基本是的 .bind() 方法的一个变体。使用 .bind()时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。比如说

Clickhere

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

$('.clickme').bind('click', function() {
alert("Bound handler called.");
});

当点击了元素，就会弹出一个警告框。

然后，想象一下这之后有另一个元素添加进来了。

$('body').append('

Another target

');

尽管这个新的元素也能够匹配选择器".clickme" ，但是由于这个元素是在调用 .bind() 之后添加的，所以点击这个元素不会有任何效果。

.live()就提供了对应这种情况的方法。如果我们是这样绑定click事件的：

$('.clickme').live('click', function() {
alert("Live handler called.");
});

然后再添加一个新元素：

$('body').append('Anothertarget

Then click on the newly added element, he can still trigger the event handler function.

.live() method works on an element that has not yet been added to the DOM due to the use of event delegation: event handlers bound to ancestor elements can respond to events triggered on descendants.

The event handler passed to .live() will not be bound to the element, but will be treated as a special event handler and bound to the root node of the DOM tree. In our example, when a new element is clicked, the following steps occur: