文書の準備が整った後でも、jQueryイベントが外部の準備機能のときに起動しないのはなぜですか？

Question

DOMがロードされているように見えますが（コンソールに「準備完了」が表示されています）、クリックイベントが発生しないのはなぜですか？

$(document).ready(function() { 
    console.log("ready!"); 
}); 

$("p").click(function() { 
    alert("You clicked on paragraph."); 
}); 

私の理解では、文書レディ機能が正しく実行された後にクリックイベントのコードがあるので、それが動作するはずということですが、それはできません。これは、準備関数の中括弧の間にイベントが含まれる場合にのみ機能します。

Answer 1

$(document).readyは非同期です。コールバック関数を渡して、DOMの準備ができているという事実を記録します。ただし、clickハンドラを設定した直後にバインドコードが実行されています。コールバック実行時ではありません。

バインディングロジックをreadyハンドラに入れてください。

Answer 2

$(document).ready()関数にコードを直接配置することも、DOMの準備ができたときにクリックをバインドする新しい関数を作成することもできます。

$(document).ready(function() { 
 
     bindClickEvent(); 
 
    }); 
 

 
    function bindClickEvent() { 
 
     $("p").click(function() { 
 
      alert("You clicked on paragraph."); 
 
     }); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<p>Click me!</p>

Answer 3

あなたはそのコードが「準備完了」イベントで実行したい場合は、単にそこに移動します。

$(document).ready(function() { 
    console.log("ready!"); 

    $("p").click(function() { 
     alert("You clicked on paragraph."); 
    }); 
}); 

ここで定義した方法は、DOMのロード時に実行されるわけではありません。