[解決済み】動的なhtmlを読み込んだ後にクリックイベントを追加するためのjQuery .live() vs .on() メソッド

質問

jQuery v.1.7.1を使っていますが、.live()メソッドが非推奨のようです。

私が抱えている問題は、ある要素に html を動的に読み込む際に、次のような問題が発生することです。

$('#parent').load("http://..."); 

その後、クリックイベントを追加しようとすると、これらのメソッドのいずれかを使用してイベントを登録することはできません。

$('#parent').click(function() ...); 

または

// according to documentation this should be used instead of .live()
$('#child').on('click', function() ...); 

この機能を実現する正しい方法は何でしょうか？私の場合、.live()でしか動作しないようですが、その方法は使うべきではないでしょう。なお、#childは動的に読み込まれる要素です。

ありがとうございます。

解決方法は？

動的に読み込まれる要素に対してクリックハンドラを動作させたい場合は、（動的に読み込まれない）親オブジェクトにイベントハンドラを設定し、以下のように動的オブジェクトにマッチするセレクタを与えます。

$('#parent').on("click", "#child", function() {});

イベントハンドラは #parent オブジェクトで発生したクリックイベントがこのオブジェクトにバブルアップされます。 #child を実行すると、あなたのクリックハンドラが起動します。 これは、委任型イベント処理（イベント処理が親オブジェクトに委任されること）と呼ばれます。

このようにするのは、イベントを #parent オブジェクトを使用する場合でも #child オブジェクトはまだ存在しませんが、後でそれが存在し、クリックされると、クリックイベントは、そのオブジェクトにバブルアップされます。 #parent オブジェクトは、それが #child をクリックしたときのイベントハンドラがあります。 #child を作成し、イベントを発生させます。