.on()
は、正しく使用されると動的に作成された要素と連携します。 jQuery docはそれを記述するのに非常に良い仕事をします。動的な要素のためにそれを使用する
の方法は、このフォームを使用することです:
$("static selector").on('click', "dynamic selector", fn);
静的セレクタは、あなたの動的なオブジェクトの祖先の両方で、静的であるいくつかのオブジェクトに解決しなければならない - ときに存在し、このコード行を実行すると、削除または再作成されません。
ダイナミックセレクタは、ダイナミックエレメントに一致するセレクタです。イベントハンドラが最初にインストールされたときには存在する必要はなく、必要に応じて頻繁に出入りすることができます。
したがって、"#container"
が静的祖先と一致し、".foo"
がクリックハンドラーを必要とする動的要素と一致する場合は、これを使用します。
$("#container").on("click", ".foo", fn);
あなたが本当にそれを理解したい場合は、これは.on()
作品のどのように委任されたイベント処理です。上記の.on()
コールを作成すると、クリックイベントハンドラが#container
オブジェクトにアタッチされました。後で.foo
オブジェクトをクリックすると、実際の.foo
オブジェクトにはクリックハンドラが存在しないので、クリックが祖先チェーンを泡立てます。クリックが#container
オブジェクトに到達すると、クリックハンドラがあり、jQueryはそのハンドラを見て、このハンドラが元のクリックオブジェクトがセレクタ".foo"
に一致するオブジェクトのみに注目します。イベントターゲットをテストしてそのセレクタと一致するかどうかを調べ、一致する場合はそのイベントハンドラを呼び出します。
(現在は非推奨).live()
メソッドは、すべてのイベントハンドラをドキュメントオブジェクトにアタッチすることによって機能しました。ドキュメントオブジェクトはドキュメント内のすべてのオブジェクトの祖先であるため、そのように委任されたイベント処理を受け取ります。 jQueryのは、それはそれを行うには悪い方法だったことを決定し、それが良かったので、ドキュメント上のすべての委任のイベントハンドラを取り付けるには、時には深刻なパフォーマンスのボトルネックを作成し、
$(document).on("click", ".foo", fn);
$(".foo").live("click", fn);
しかし:だから、上記の例では、これらの二つは等価ですドキュメントオブジェクトよりも実際のターゲットオブジェクトに近いと思われる静的な祖先を、開発者に指定させる必要があります。
グレート答えが、私は「jQueryのドキュメントは、それを説明するのはかなり良い仕事をしていません。」と一致しません。もしそれがかなり良い仕事をするなら、私と同じようにそれを探している人や人々にはそれほど多くの質問はありません。 – Frodik