jquery live()重複綁定的解決方法介紹_jquery

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');

次に、新しく追加された要素をクリックすると、引き続きイベント ハンドラー関数をトリガーできます。

イベント代表者

.live() メソッドは、イベント委任の使用により DOM にまだ追加されていない要素に対して機能します。祖先要素にバインドされたイベント ハンドラーは、子孫でトリガーされたイベントに応答できます。

.live() に渡されるイベント ハンドラーは要素にバインドされませんが、特別なイベント ハンドラーとして扱われ、DOM ツリーのルート ノードにバインドされます。この例では、新しい要素をクリックすると、次のステップが発生します:

1. クリック イベントを生成し、

を処理するために

に渡します。

2.

に直接バインドされたイベント処理関数がないため、イベントは DOM ツリー

にバブルアップします。

3. イベントは、デフォルトで DOM ツリーのルート ノードにバインドされ続けます。

4. .live()でバインドされた特殊なクリックイベント処理関数を実行します。

5. このイベント処理関数は、まずイベント オブジェクトのターゲットを検出し、続行する必要があるかどうかを判断します。このテストは、$(event.target).closest('.clickme') が一致する要素を見つけることができるかどうかをチェックすることによって実装されます。

6. 一致する要素が見つかった場合は、元のイベント処理関数を呼び出します。

上記の手順 5 のテストはイベントが発生したときにのみ実行されるため、いつでも追加される要素はこのイベントに応答できます。

追加メモ

.live() は便利ですが、その特殊な実装により、いかなる状況でも単純に .bind() を置き換えることはできません。主な違いは次のとおりです:

jQuery 1.4 では、.live() メソッドはカスタム イベントとすべての JavaScript イベントをサポートします。 jQuery 1.4.1 では、focus および blue イベントもサポートされています (より適切でバブリングする focusin および focusout にマッピングされます)。

さらに、jQuery1.4.1では、ホバー(「mouseenter、mouseleave」にマッピング)もサポートされています。ただし、jQuery 1.3.x では、サポートされている JavaScript イベントとカスタム イベント (click、dblclick、keydown、keypress、keyup、mousedown、mousemove、mouseout、mouseover、mouseup) のみがサポートされます。

.live() は、DOM トラバーサルで見つかった要素を完全にはサポートしていません。代わりに、前の例で述べたように、常にセレクターの直後に .live() メソッドを使用する必要があります。

イベント処理関数が .live() にバインドされており、他のイベント処理関数の実行を停止したい場合、この関数は false を返す必要があります。 単に .stopPropagation() を呼び出すだけでは、この目的を達成することはできません。

イベント バインディングの詳細については、.bind() メソッドを参照してください。

jQuery 1.4.1 では、.bind() によって提供される機能と同様に、複数のイベントを一度に .live() にバインドできます。

jQuery 1.4 では、data パラメーターを使用して追加情報をイベント ハンドラー関数に渡すことができます。クロージャによって発生する問題に対処するのに適しています。詳細については、.bind() の説明を参照してください。

パラメータ

typeString イベントタイプ

data (オプション) オブジェクト バインドされるイベント ハンドラー関数

fn 関数 バインドするイベント処理関数

例

HTML コード:

クリックしてください!

jQuery コード:

$("p").live("click", function(){
$(this).after("

別の段落!< ;/p>");
});

説明:

デフォルトのイベント動作とイベントのバブリングを防止し、false を返します
jQuery コード:

$("a").live("click",function() { return false; });

//根本的な原因はここにあります。デフォルトのイベント動作とイベントのバブリングを防ぐ必要があります。コードの後に​​ return false を追加すれば問題ありません。

説明:

デフォルトのイベント動作のみを防止します
jQuery コード:

$("a").live("click", function(event){

event.preventDefault();});