2012-03-20 9 views
1

私はjQuery live()の機能をon()に置き換えることについて読んできましたが、ライブ以外の機能と同じように機能します。例えば

$('a').on('click', function(){});を使用すると、使用したのと同じ効果があります:$('a').click(function(){});

私は動的ページに要素を追加しているので、私は$('a').live('click', function(){}); の機能を複製する必要があります。 #containerは、関連するすべてのアンカーの静的親のidある

$('#container').on('click', 'a', function(){}) 

+3

ドキュメントを少しスクロールすると、答えが表示されます。http://api.jquery.com/live/ –

+1

将来の要素のための[jQuery .on関数の重複可能性があります。非推奨](http:// stackoverflow。com/questions/8191064/jquery-on-function-for-future-as-be-deprecated) – Brad

答えて

4

あなたは、セレクタを提供する必要があります。
onを最も近い静的な親に接続してください。

on

docs

セレクタを省略またはNULLである場合、イベントハンドラは、直接または直接結合し と呼ばれています。ハンドラは、 要素で直接発生するか、子孫(内部)要素から発生するバブルであろうと、選択した要素でイベント が発生するたびに呼び出されます。

セレクタが用意されている場合、イベントハンドラは が委任されています。イベントが直接バインドされた要素の に発生したときにはハンドラは呼び出されませんが、 がセレクタに一致する子孫(内部要素)に対してのみハンドラが呼び出されます。 jQueryは、イベントターゲットからイベントターゲット までのイベントを、ハンドラがアタッチされている要素(すなわち、最も内側の要素の の最も内側)に吹き込み、セレクタに一致する パスに沿った任意の要素のハンドラを実行します。

+1

このメソッドは、body/documentにイベントをバインドする他の回答よりも優先されます。より集中的な要素(#container)を持つことで、より効率的に動作します。 $ .onは、このイベントを持つすべての要素の最も近い共通の親にバインドする必要があります。それが体の場合、それは大丈夫です。しかし、それらがすべて単一のテーブルにある場合は、そのテーブルをコンテナとして使用します。 – kingcoyote

+0

華麗な、ありがとう - 私はあまりにも急いでいたようだ。このためのドキュメントページは非常に重いテキストだったので、すばやく簡単な回答をいただきました。ありがとうございます! – Alex

+0

@Alexcoady。重いかもしれませんが、ドキュメントの各ページを読むことから多くのことを学びます。 jQueryを定期的に使用している場合は同じことをお勧めします。 – gdoron

2

の同等:

$(document).on('click', 'a', function(){}); 

しかし、ではなく.live()は、次のことができないようdocumentオブジェクトにすべてのイベントハンドラをアタッチするので.on()がより強力である:

$('a').live('click', function(){}); 

はこれです動的オブジェクトにはるかに近い静的な親を選択し、特に委任されたイベントハンドラがたくさんある場合は、より効率的になります。あなたは、リンクと呼ばれるコンテナのdivを持っていた場合

たとえば、あなたはこれを行うだろう:

$("#links").on('click', 'a', function(){}); 

jQueryオブジェクト内のセレクタは、あなたがにバインドされたイベントハンドラをしたい静的オブジェクトです。 .on()への引数のセレクタは、静的な親オブジェクトにバブルアップする、処理したいオブジェクトのオブジェクトに一致するセレクタです。

関連する問題