2012-03-21 5 views
21

私は.on()が動的に作成された要素に関して.live()のように働いていたことを印象づけていました(例えば$('.foo').on('click', function(){alert('click')});を使用し、次にあるAJAXのためにfooの要素が作成されました。要素を使用してアラートを発生させます)。実際には、これらは私が得た結果ではありませんでした。私は間違いを犯す可能性がありますが、新しいの方法は、.on()の結果としてこれらの結果を達成する方法を理解するのを助けることができますか?jQuery.on()は、イベントハンドラの作成後に追加される要素に対して機能しますか?

ありがとうございます。

答えて

70

.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); 

しかし:だから、上記の例では、これらの二つは等価ですドキュメントオブジェクトよりも実際のターゲットオブジェクトに近いと思われる静的な祖先を、開発者に指定させる必要があります。

+4

グレート答えが、私は「jQueryのドキュメントは、それを説明するのはかなり良い仕事をしていません。」と一致しません。もしそれがかなり良い仕事をするなら、私と同じようにそれを探している人や人々にはそれほど多くの質問はありません。 – Frodik

関連する問題