4
すべてのjqueryイベントを$(document)にバインドする必要がありますか?
これはどこから来たのか 私が初めてjQueryを学んだとき、私は通常、次のようなイベントをアタッチしました。 $('.my-widget a').click(function() { $(this).toggleClass('active'); }); セレクターの速度とイベントの委任についてさらに学習した後、「jQueryイベントの委任によってコードが高速化される」といくつかの場所で読みました。だから私はこのようなコードを書き始めました: $('.my-widget').on('click','a',function() { $(this).toggleClass('active'); }); これは、非推奨の.live()イベントの動作を複製するための推奨される方法でもありました。私のサイトの多くは常に動的にウィジェットを追加/削除しているので、これは私にとって重要です。ただし、既存のコンテナ「.my-widget」に追加された要素のみが動作するため、上記は.live()とまったく同じようには動作しません。そのコードが実行された後、htmlの別のブロックを動的に追加した場合、それらの要素はそれらにバインドされたイベントを取得しません。このような: setTimeout(function() { $('body').append('<div class="my-widget"><a>Click does nothing</a></div>'); }, 1000); 私が達成したいこと: .live()の古い動作//イベントをまだ存在しない要素にアタッチすることを意味します .on()の利点 イベントをバインドする最速のパフォーマンス イベントを管理する簡単な方法 私は今このようなすべてのイベントを添付します: $(document).on('click.my-widget-namespace', '.my-widget a', function() { $(this).toggleClass('active'); }); それは私のすべての目標を満たしているようです。(はい、IEでは何らかの理由で遅くなりますが、理由はわかりませんか?)単一のイベントのみが単一の要素に関連付けられ、セカンダリセレクターはイベントが発生したときにのみ評価されるため、高速です(これが間違っている場合は修正してください)。名前空間は、イベントリスナーを簡単に切り替えることができるので素晴らしいです。 私の解決策/質問 そのため、jQueryイベントは常に$(document)にバインドする必要があると考え始めています。 これをしたくない理由はありますか? これはベストプラクティスと見なすことができますか?そうでない場合、なぜですか? これを全部読んだなら、ありがとう。あらゆる/すべてのフィードバック/洞察に感謝します。 仮定: .on()//少なくともバージョン1.7 をサポートするjQueryの使用 イベントを動的に追加されるコンテンツに追加したい 読み/例: http://24ways.org/2011/your-jquery-now-with-less-suck http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery http://www.jasonbuckboyer.com/playground/speed/speed.html http://api.jquery.com/on/