jQuery .onは動作しませんが.liveは

Question

です。live（）メソッドはバージョン1.7以降で廃止されていますので、ソースを参照してライブイベントハンドラをすべてon（）に変換し始めました。私は変化が簡単で、以前と同じようにすべてがうまくいくという印象を受けました。しかし、私はそれが必要なように動作しないいくつかのコードに遭遇した。

私は

$('table.accordion-header').live("click", function ($e) { 
    // gobs of code 
} 

...次のjQueryは、テーブルタグのクリックイベントをバインドする選択が...とそれだけで正常に動作します（つまり、 - 私のテーブルタグのクリックイベントであっても、非同期の後に発生しますページのポストバックが発生します）。しかし、コードを次のように変更すると、ページの非同期ポストバックが発生した後にクリックイベントが発生しなくなります。注意してください。クリックイベントは、非同期のポストバック（）まで機能しますが、それ以降はは機能しません。では、私はここで何が欠けていますか？

Answer 1

$('table.accordion-header').live("click", function ($e) { 
    // gobs of code 
}); 

と同等のは、人々がかなり.on()の方法を動的にバージョンを理解していないことをかなり一般的なようだと、このような

$(document).on("click", 'table.accordion-header', function ($e) { 
    // gobs of code 
}); 

Answer 2

質問が多く、何度も回答されているあります働く.on()は、あなたができるため.on()と交換した

$(someStaticParentObject).on("click", 'table.accordion-header', function ($e) { 
    // code 
} 

.live()：あなたは、オブジェクトが、おそらくこのような.on()のダイナミックなフォームを使用するつもりあなたが.on()を呼び出す時に存在している必要があります.on()の静的なフォームを使用していますイベントハンドラをアタッチする動的オブジェクトの静的親オブジェクトを指定してより良いパフォーマンスを得るには、それをdocumentオブジェクトにアタッチする方が効率的です（.live()）。 .on()の使い方を理解するために、これらの以前の回答（私が書いたもの）をお読みになることをお勧めします。

jquery: on vs 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()?

Why not take Javascript event delegation to the extreme?

Answer 3

：これらの答えも .on()を使用するための最も効率的な方法と、それがどのように動作するかの簡単な説明についてのコメントを含めます

jQuery 1.7.2ソースでは、 "live"は "on"を指しているので、この問題はおそらく "on"関数には関係しません。これは除外される必要があります。 onのセレクタが問題になる可能性があります。

jQueryのソース：誰かがどのように最初の親またはコンテキストセレクタの作品を見せてくれた時に（）で

live: function(types, data, fn) { 
    jQuery(this.context).on(types, this.selector, data, fn); 
    return this; 
}, 

Answer 4

私は（私のライブを更新しようとのトラブルを持っていた）には、あまりにもが、最終的にはそれを得ました。キーは、この最初の要素がDocument Object Modelにあることを確認しています。

$（this）が.on（）で動作する方法は明らかでもありません。あなたの関数のコード内の$（この）上に示した例では

$(document).on("click", 'table.accordion-header', function ($e) { 
    // gobs of code 
}); 

は、ご想像のとおり$（「table.accordion-ヘッダ」）及びません$（文書）を参照することになります。

ここでさらなる説明：私はこれを置くことができ.on() with $(this)

Answer 5

ベストな方法は、ドキュメントが.live()と.on()機能にjQueryからと言うだけのようです：

1. あなたのセレクタには「$（セレクタ）」で投げます動的にではなくページを読み込む具体的な要素。
2. 次にセレクタが表示されているメソッドにセカンダリセレクタを配置します。このセレクタは動的に作成できます。

//so this.. 
    $('table.accordion-header').live("click", function ($e) { 
    // gobs of code 
}); 

//becomes this.. 
    $('table').on("click",'.accordion-header', function ($e) { 
    // gobs of code 
}); 

"テーブル" はもちろんのページがロードされると仮定すると。