jquery：on vs live

Question

.live()を.on()に置き換えたとき、なぜ私のイベントがhtml()メソッドを介してAJAXの応答を挿入した後に機能しないのか不思議です。

$('.alert-link').on("click", function(){ 
alert('abc'); 
return false; 
}); 

とAjax更新応答が

警告 更新

になります要求を、トリガすると：のようなものが

<div class="a"> 
    <a href="" class="alert-link">alert</a> 
    <a href="" class="ajax-update">update</a> 
</div> 

とjQueryコード：私はHTML構造を持っていると仮定私はそれをparent()に挿入します。再度alert-linkを押すと、/にリダイレクトされますが、.on()を.live()に変更すると、再びアラートが表示されます。私はここで何が欠けていますか？私は.on()が.delegate()と.live()の両方の代わりであると読んでいます。

Answer 1

.onコンバインと.bind、.live、および.delegateを置き換えます。 $('selector').on('event', callback)の構文はbindであり、liveではありません。

onにお電話にフィルタリングセレクタを追加します。この場合、

$('container').on('click', 'child-filter', callback); 

を、

$('.a').on("click", ".alert-link", function(){ 
    alert('abc'); 
    return false; 
}); 

より局所的なコンテナにデリゲートハンドラをアタッチする方が効率的であるため、これが変更されましたDOMのルートにハンドラを接続する古いスタイルの.liveよりも、 alert-link要素のみ.liveで、小さなadivの内側に表示されますにもかかわらず、言い換えれば

は、jQueryのは、ページ上のすべての単一のクリックイベントに耳を傾け、委任セレクタと比較します。ターゲットを絞り込むことで、jQueryはaの要素のクリックを処理するだけです。

Answer 2

それは確かに.delegateと.liveに代わるものですが、あなたは、いくつかの追加パラメータに渡す必要があります。詳細は

var container = $('.a').on('click', '.alert-link', function() { 
    alert('abc'); 
    return false; 
}).on('click', '.ajax-update', function() { 
    // something that uses AJAX to update .a, like: 
    container.load('some-url'); 
    return false; 
}); 

、see the documentation。

Answer 3

.on()の動的フォームの代わりに.on()の静的フォームを使用していたため、特定の変換を.on()に正しく実行できませんでした。代わりに、静的なフォームの：

$('.alert-link').on("click", function(){ 

あなたは、このようなダイナミックなフォームを使用する必要があります。

$(someStaticParentObject).on("click", '.alert-link', function(){ 

これはsomeStaticParentObjectにイベントハンドラをバインドして、発信子イベントのハンドリング委任イベントを使用しますセレクタ'.alert-link'に一致するアイテムにお使いのバージョンは、イベントハンドラ（静的バインディング）をインストールした時点で存在し、委任されたイベント処理を使用していないオブジェクトがまだ作成されていないイベントを処理していなかったものがある場合は、すぐにバインドされました（'.alert-link'）。

.live()対.on()の良い説明のためにこれらの以前の回答を参照してください、なぜ.live()は、いくつかのケースではパフォーマンスの問題につながることができます：

Does jQuery.on() work for elements that are added after the event handler is created?

How does jQuery's new on() method compare to the live() method in performance?

What's the difference between jQuery.bind() and jQuery.on()?

jQuery .live() vs .on() method for adding a click event after loading dynamic html

一言で言えば

Why not take Javascript event delegation to the extreme?

：

$(".item").live('click', fn); 

と同等の機能である：.live()の二つの主な欠点である

$(document).on('click', '.item', fn); 

：

1. それは直ちにセレクタ".item"を評価どの結果がまったく使用されないため、純粋に無駄になるサイクルです。

2. .live()は、ドキュメントオブジェクトに配線されています。これは委任されたイベント処理を使用して、出入りするオブジェクトを処理できますが、.live()すべてのイベントハンドラがドキュメントオブジェクトに割り当てられます。多くの場合は、ドキュメントにバブルするすべてのイベントをすべての.live()イベントハンドラのセレクタに対して評価する必要があるため、大きなパフォーマンスのボトルネックになる可能性があります。一方、.on()は、ドキュメントオブジェクトだけでなく、イベントの実際の起点に非常に近い祖先にもバインドすることができます。委任されたイベントハンドラが多数ある場合は、そのオブジェクトに近いイベントだけが.on()セレクタで処理され、パフォーマンスが向上します。 #containerダイナミック.itemオブジェクトの親である

   $("#container").on('click', '.item', fn); 
   

たとえば、上記ハンドラは次のように行うことができます。