jquery - $("#element") と $(document.getElementById("element")) の違いは?

Question

jQuery (v1.7) で奇妙な動作が発生しています。

イベントリスナーを、ある時点でajaxを介して実際に置き換えられる要素に設定しようとしています。

$(document.getElementById('element')).live('click', function() {
    // do something on click
});

これは他のメソッドでは正常に機能しますが、ライブメソッドは実行を拒否します。これをネイティブのjQueryセレクターに置き換えると機能します。なんで？

$("#element").live('click', function() {
    // do something on click
});

score 3 · Accepted Answer

liveこのようには機能しません。イベントはドキュメントにバブルアップしtarget、イベントのが調べられ、セレクターと一致するかどうかが確認されます。

イベントハンドラーをバインドするときに、イベントをリッスンしている要素が存在しない可能性が高いため、getElementById何も返されません。

そのセマンティクスについて考えるliveと、DOM 要素を渡すことは意味がありません。

score 2 · Accepted Answer

document.getElementById は、現在存在する要素を取得しています。文字列「#id」を live で渡すと、jQuery は、その文字列に一致する ID を持つ要素に由来する document.body で将来のイベントを探します。

補足として、.on() を調べてください。.live() は計算コストが高いだけでなく、推奨されていません。

score 1 · Accepted Answer

最初のケースでは、単純なノードを jQuery コンストラクターに渡していると確信しています。つまり、そのノードがなくなるとすぐに、オブジェクトは何も参照しなくなり、機能しなくなりますlive。

一方、代わりに jQuery セレクターを渡すことにより、live削除、再追加、またはその他の方法でキックされた場合でも、その ID を持つ要素を常に探すことができます。

score 1 · Accepted Answer

.live()すべてのクリックイベントをフィルタリングして、jQuery オブジェクトの作成元のセレクターに一致するものを確認します。
現在 jQuery オブジェクトにある要素とは関係ありません。

$(element).live()セレクターがないため、書き込みは何もしません。

score 1 · Accepted Answer

実際のイベントをドキュメントに添付するためlive、委任と呼ばれます。

その後、クリックが発生すると、jQuery はセレクター内の要素がイベントのオリジンであるかどうかをチェックし、そうである場合は関数が呼び出されます。

$("#element") は、セレクターに一致する要素があるかどうかを確認できますが、セレクター$(document.getElementById("element));がないため、オブジェクトを削除すると失われるため、できません。

score 0 · Accepted Answer

ネイティブ JavaScript getElementById は実際の DOM オブジェクトを提供しますが、jquery セレクターはオブジェクトの jquery ラッパーを提供します。

.live が動作するには jquery ラッパーが必要だと思います。

また、.live は 1.7 で廃止されたため、.on または .delegate を使用する必要があります。

6 に答える 6