タグ付けされた質問 「jquery-on」

15
jQueryを使用して入力にフォーカスがあるかどうかをテストする
私が構築しているサイトのフロントページでは、いくつか<div>のがCSS :hover疑似クラスを使用して、マウスを上に置くと境界線を追加します。の1つには、jQueryを使用<div>し<form>て、その中の入力にフォーカスがある場合に境界を保持するが含まれます。IE6がs :hover以外<a>の要素をサポートしないことを除いて、これは完全に機能します。したがって、このブラウザでは:hover、$(#element).hover()メソッドを使用してCSS を模倣するためにjQueryのみを使用しています。唯一の問題は、jQueryがフォームfocus() との 両方を処理するようhover()になったことです。入力にフォーカスがある場合、ユーザーがマウスを内側と外側に動かすと、境界が消えます。 この動作を停止するために、なんらかの条件を使用できると考えていました。たとえば、いずれかの入力にフォーカスがあるかどうかマウスアウトでテストした場合、境界線が消えないようにすることができます。私の知る限り、:focusjQuery にはセレクターがないため、これを実現する方法がわかりません。何か案は?

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/
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.