2012-03-20 8 views
1

jQuery.loadを使用してHTMLコンテンツをWebページに動的に読み込む場合、ハンドラを「再バインド」するにはどうすればよいでしょうか?jQuery.loadでロードされたjQuery.bind'ing

通常、ハンドブックはjQuery.readyにバインドしますが、新しく読み込まれたコンテンツでは正しく動作しません。これは、ロードされたコンテンツの外部と内部の両方で使用されるハンドラのためです。したがって、load success関数でバインドするだけでは、本当にうまくありません。

+2

新しいイベントハンドラをバインドしないでください。 [イベント委任](http://api.jquery.com/on/#direct-and-delegated-events)のドキュメントを参照してください。 –

答えて

5

これらのハンドラを購読するときには、.on機能を使用すると、まだ存在しないDOM要素に登録することができます。追加すると、サブスクリプションが行われます。 .on関数がjQuery 1.7で導入されました。古いバージョンを使用している場合は、.delegate関数を使用して、jQuery 1.4.2で導入されたのと同じ効果を得ることができます。さらに古いバージョンを使用している場合は、.liveメソッドを使用できます。ここで

はあなたには、いくつかの要素(既存かどうか、まだそれが将来的に追加される既存)のクリックイベントをサブスクライブすることができる方法の例です:

$('#someParentElement').on('click', '#someElement', function() { 

}); 
+1

小さな補遺: '$(document)'でこれを呼び出すのではなく、最も近い非動的な親を使うと、より良い性能が得られます。 @Bhamlin、同意した。 – bhamlin

+0

私は私の答えを更新しました。 –

3

あなたが新しいコンテンツのためのイベントを委任する必要があります静的親要素に、例えば:

$("#myDiv").load(myUrl); 

$("#myDiv").on('click', '#myElement', function() { 
    // do stuff when #myElement (which was part of the HTML 
    // returned in the load() call) is clicked. 
}) 

これは、使用しない場合は、jQueryの1.7以上使用していると仮定しdelegate()

$("#myDiv").delegate('#myElement', 'click', function() { 
    // do stuff when #myElement (which was part of the HTML 
    // returned in the load() call) is clicked. 
}) 
関連する問題