jQuery：DOM内の関連するすべての要素にイベントハンドラを確実に取り付ける方法

Question

index.htmlに約60個のフィルタボタンがあり、それぞれに$().click()イベントハンドラが添付されています。私のCSSファイルで

$(document).ready(function() { 
    $('.filter_button_class').click(function(e) { 
     console.log("filter button clicked"); 
     e.preventDefault(); 
    }); 
}); 

、:activeセレクタは、それがクリックされたときに、フィルタボタンが青色に変わり保証します。

ほとんどの場合、コードは正常に機能します。 index.htmlが最初にブラウザに読み込まれると、イベントハンドラはすべて正しく接続されているように見え、コードは常に意図どおりに機能します。これは単一のページアプリケーションなので、ユーザーがindex.htmlに戻って戻るボタンを押してもう一度フィルターボタンをクリックすると、実際には青色に変わりますが、.click()ハンドラーのコードは実行されないことがあります。

index.htmlを再読み込みすると、ユーザーがフィルタボタンをクリックする前にすべてのクリックハンドラが接続されているわけではないことが考えられます。しかし、ユーザーが同じフィルターボタンを再度クリックすると（合計2回）、通常はハンドラーが実行されます。

質問click()のコードをすべてのイベントハンドラが最初に接続されるまで実行するのを待つ方法はありますか？

.click()の代わりに私も.on()を試しましたが、これは効果がありません。私が特定している問題（イベントハンドラが要素にあまりにも遅く付く）は間違っているかもしれませんが、私はもちろんフィードバックをいただければ幸いです。

Answer 1

説明されている動作の唯一の説明は、HTMLが非常に大きいため、ブラウザが解析してDOMを作成するまでに時間がかかることです。それをしている間、部分的にページをレンダリングします。 readyを使用すると、jQueryに、そのプロセスが完了するまでコールバック内のコードを呼び出さないように指示します。そのため、クリックハンドラがアタッチされる前に（DOM解析がまだ行われていて、readyのコールバックがまだ開始されていないため）、ユーザーがボタンを表示してクリックする機会が少々あります。これは記載された症状に合っており、特に最初のクリックが機能しない（readyはまだ発射されていない）が、後では（readyが発砲する）。

何が起こっているのかということ場合、あなたはreadyコールバックを待っていないイベント委任とを使用してそれを避けることができます。

$(document).on("click", ".filter_button_class", function() { 
    // ...handle the click... 
}); 

のみトリガーされますdocument上のクリックハンドラをフッククリックが.filter_button_class要素を通過した場合。そうであれば、あなたのハンドラはのようにと呼ばれ、代わりにその要素にイベントをフックしました。

これは、スクリプトのルールの1つを破ることです。これは、HTMLの末尾で、終了する</body>タグの直前です。通常、再び

<script src="jquery.js"></script> 
<script src="yourcode.js"></script> 
<!-- problematic (large) content --> 

：代わりに、私たちはHTMLのサイズとDOMの構築時間によって引き起こされる問題を扱っている、特にので、私たちはそのルールを破るだろうし、問題のあるコンテンツの上scriptタグを置きますDOMパーサーがスクリプトをフェッチするのを待つため、この場合、既知の問題への応答として、うまくいきます。 （委任アップフロントハンドラを使用して、その後も直接ハンドラがready経由で追加）

あなたがthis fiddleで（readyを使用して）this fiddleを比較することにより、効果を見ることができます（ジャスト。キャッシュが有効になっており、動作していることを確認）。最初の場合は、あなたが素早い場合は、ボタンをクリックして何も表示させないことができます。 2番目の方法では、すばやくボタンをクリックして「委任：」メッセージのみを受け取ることができますが、後でクリックすると「直接」メッセージが表示され、次に「委任」メッセージが表示されます。