javascript - 書き換え - jquery 要素が追加されたら




動的HTMLをロードした後にclickイベントを追加するためのjQuery.live()vs.on()メソッド (5)

私は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は動的に読み込まれる要素です。

ありがとう。


.on()はjQueryバージョン1.7以上用です。 古いバージョンをお持ちの場合は、次のようにしてください:

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

1.7の.live()に相当するのは次のようなものです:

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

基本的に、クリックイベントのドキュメントを見て#childのためにそれらをフィルタリングします。


これを試して:

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

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

イベントハンドラは現在選択されている要素にのみバインドされています。 コードが.on()呼び出した時点でページに存在していなければなりません。

#child要素は$.on()を呼び出すと存在しないため、イベントはバインドされません( $.live()とは異なります)。 #parent 存在しているので、イベントをバインドすると問題ありません。

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


動的にロードされる要素に対してクリックハンドラを動作させたい場合は、(動的にロードされない)親オブジェクトにイベントハンドラを設定し、このように動的オブジェクトに一致するセレクタを与えます。

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

イベントハンドラは#parentオブジェクトにアタッチされ、 #parentたクリックイベントが発生する#childにクリックハンドラが起動します。 これは委任されたイベント処理と呼ばれます(イベント処理は親オブジェクトに委任されます)。

#childオブジェクトがまだ存在しない場合でもイベントを#parentオブジェクトにアタッチすることができますが、後でそれがクリックされると、clickイベントは#parentオブジェクトにバブルアップされるため、 #parentようにしています。それが#childに由来し、 #childをクリックしてイベントを発生さ#childためのイベントハンドラがあることを確認してください。


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

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

jQueryをロードした後、live()を呼び出す前にそれをインクルードしてください。





handler