live（）のメリット - bind（）と似ています

Question

jqueryのライブイベントで読んだことがありますが、まだまだ混乱していますか？それを使用する利点は何ですか？

http://docs.jquery.com/Events/live

私は結合するのに似ている知っているが、これらのイベントの両方が、まだ私にはオフに思えます。

ちょうどいくつかのポインタを探しています。

Answer 1

警告：この回答は古いです。 まだ非常に便利なですが、liveは新しいバージョンのjQueryでは廃止され削除されました。したがって、ユースケースは変更されていないので、答えを読んでください。なぜ、いつ、より少ないイベントハンドラを使用するのかを学習します。しかし、まだ古いバージョンのjQuery（v1.4.2以前）を使用している場合を除き、代わりに新しい同等のコードを書くことを検討する必要があります。jQuery API for liveで文書化し、ここにコピーされたよう：その後継の面で.live()メソッドを書き換え

は簡単です。これらは、すべての3つのイベントの取り付け方法と同等の通話のためのテンプレートです：

1. $(selector).live(events, data, handler); // jQuery 1.3+
2. $(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
3. $(document).on(events, selector, data, handler); // jQuery 1.7+

時には、要素、ページのロード時のセットを持って、たとえば、編集リンクのように：

ページが最初に読み込まれた後、あなたは、動的にこのテーブルに新しい要素を追加した場合

$(document).ready(function() { 
    $('a.edit').click(function() { 
    // do something 
    return false; 
    }); 
}); 

しかし、どのような：

は今、多分あなたはjQueryを使って、このようなものがありますか？

$('table').append(' 
    <tr><td>Item 4</td><td><a href="#" class="edit">Edit</a></td></tr> 
'); 

この新しいアイテムで[編集]をクリックすると、イベントがページの読み込みにバインドされているため、何も起こりません。ライブに入る。これを使うと、このような上記のイベントをバインドすることができます

$(document).ready(function() { 
    $('a.edit').live('click', function() { 
    // do something 
    return false; 
    }); 
}); 

を今、あなたはページが最初にロードされた後editのクラスに、新しい<a>要素を追加した場合、それはまだ、このイベントハンドラを登録します。

しかし、これはどのように達成されていますか？

jQueryは、この機能を実現するためにイベント委任と呼ばれるものを使用します。イベントの委任は、この状況や、大量のハンドラをロードする場合に役立ちます。

<div id="container"> 
    <img src="happy.jpg"> 
    <img src="sad.jpg"> 
    <img src="laugh.jpg"> 
    <img src="boring.jpg"> 
</div> 

しかし、その代わりに4枚の画像を、あなたはあなたがXのアクションが時にユーザーがクリックに行われるように画像にクリックイベントをバインドする100、または200、または1000を持っている：あなたがイメージを持つDIVを持っていると言いますその上に。あなたが期待している通りにそれをやります...

$('#container img').click(function() { 
    // do something 
}); 

...それでは、同じことをする数百のハンドラをバインドします！これは非効率的で、重いWebアプリケーションではパフォーマンスが低下する可能性があります。イベントの委任では、後で画像を追加する予定がない場合でも、ライブを使用する方が、の1つのハンドラをコンテナにバインドし、ターゲットがクリックされたときにチェックすることができますアクションを実行した後、画像があって、：

// to achieve the effect without live... 
$('#container').click(function(e) { 
    if($(e.target).is('img')) { 
     performAction(e.target); 
    } 
}); 

// or, with live: 
$('img', '#container').live('click', function() { 
    performAction(this); 
}); 

jQueryの新しい要素は後で追加することができるか、そのパフォーマンスが重要であり、代わりに実際の画像に結合事象のことを知っているので、それは1つが追加される場合があります最初の例のようにdiv（実際には、ボディにバインドしていることは確かですが、上記の例ではコンテナにある可能性があります）、代理してください。このe.targetプロパティは、クリックされた/処理されたイベントが、指定したセレクタと一致するかどうかをチェックすることができます。

これは、イベントを再バインドしない直接的な方法だけでなく、大量のアイテムに対して劇的に高速化することができることを明確にします。

Answer 2

.live()の場合、非常に動的なWebサイトを使用している場合は、イベントハンドラを更新する必要はありません。

$('.hello').live('click', function() { 
    alert('Hello!'); 
}); 

その例が、それはAJAXによって、あるいは昔ながらのJavaScriptによるもので、すでに「ハロー」クラスなど動的に挿入されているすべての要素を持っている任意の要素にクリックイベントをバインドします。

Answer 3

イベントハンドラは、それらの要素が作成されるときに、新しいマッチング要素にも追加されるという利点があります。これにより、必要な新しい要素（以前に使用されたセレクタと一致する）を作成するたびに、イベントハンドラを手動で追加する必要がなくなります。

のjQuery 1.3で追加されました： - と将来 - マッチ 要素すべて 電流を（クリックなど）イベントにハンドラ をバインドします。

http://docs.jquery.com/Events/live#typefnから、強調する鉱山。