動的HTMLをロードした後にクリックイベントを追加するためのjQuery .live（）メソッドと.on（）メソッド

私は.live（）メソッドが明らかに非推奨であるjQuery v.1.7.1を使用しています。

私が抱えている問題は、次のように使用して要素に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てイベントを発生させるイベントハンドラがあります。

これを試して：

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

$.on()ドキュメントから：

イベントハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードがを呼び出すときにページ上に存在している必要があります.on()。

あなたの#childお電話の際は、要素が存在しない$.on()イベントが（とは異なり、バインドされていないので、その上で$.live()）。#parentただし、存在するため、イベントをそれにバインドすることは問題ありません。

上記のコードの2番目の引数は、イベントが#parentfromにバブリングした場合にのみトリガーする「フィルター」として機能し#childます。

$(document).on('click', '.selector', function() { /* do stuff */ });

編集：私はこれがどのように機能するかについてもう少し情報を提供しています、なぜなら...言葉だからです。この例では、ドキュメント全体にリスナーを配置しています。

にclick一致する要素を使用する.selectorと、イベントが親ドキュメントevent.stopPropagation()にバブリングされる、メソッドを呼び出すリスナーが他にない限り、イベントがメインドキュメントにバブリングします。

特定の要素または要素のセットにバインドする代わりに、指定したセレクターに一致する要素からのイベントをリッスンしています。つまり、現在存在する要素や動的に追加された要素に自動的に一致するリスナーを1回だけ作成できます。

これは、パフォーマンスやメモリ使用率（大規模アプリケーションで）を含むいくつかの理由で賢いです

編集：

言うまでもなく、リッスンできる最も近い親要素の方が優れdocumentています。イベントを監視する子がその親要素内にある限り、代わりに任意の要素を使用できますが、実際には何もする必要はありません。質問で。

1.7の.live（）に相当するものは次のようになります。

$(document).on('click', '#child', function() ...); 

基本的に、ドキュメントでクリックイベントを監視し、＃childでフィルタリングします。

答えが少し遅いのはわかっていますが、.live（）メソッド用のポリフィルを作成しました。私はjQuery 1.11でテストしましたが、かなりうまく機能しているようです。可能な限り.on（）メソッドを実装することになっていることはわかっていますが、何らかの理由ですべての.live（）呼び出しを同等の.on（）呼び出しに変換することができない大きなプロジェクトでは、次のようになります。作業：

if(jQuery && !jQuery.fn.live) {
    jQuery.fn.live = function(evt, func) {
        $('body').on(evt, this.selector, func);
    }
}

jQueryをロードした後、live（）を呼び出す前に、それを含めるだけです。

.on（）は、jQueryバージョン1.7以降用です。古いバージョンを使用している場合は、これを使用してください：

$("#SomeId").live("click",function(){
    //do stuff;
});

プロジェクトで「ライブ」を使用しましたが、私の友人の1人が、ライブではなく「オン」を使用するように提案しました。そして、それを使おうとしたときに、あなたが経験したような問題が発生しました。

私のページでは、ボタンテーブルの行と多くのDOMを動的に作成します。でも魔法を使うと消えてしまいました。

子供のように使用するなどの他のソリューションは、クリックするたびに関数を呼び出すだけです。しかし、私はそれを再び起こす方法を見つけました、そしてここに解決策があります。

コードを次のように記述します。

function caller(){
    $('.ObjectYouWntToCall').on("click", function() {...magic...});
}

caller（）;を呼び出します。このようなページでオブジェクトを作成した後。

$('<dom class="ObjectYouWntToCall">bla... bla...<dom>').appendTo("#whereeveryouwant");
caller();

このようにして、ページ上のすべてのクリックではないことになっているときに、関数が呼び出されます。