Почему событие jQuery не запускается, когда вне функции готовности, даже после того, как документ готов?

Question

Почему в этом случае событие click не срабатывает, хотя DOM, кажется, загружен (в консоли отображается "готово")?

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

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

Я понимаю, что, поскольку код для события click находится после того, как функция готовности документа выполнена правильно, она должна работать, но это не так. Это будет работать только тогда, когда событие включено в фигурные скобки в функции готовности.

Answer 1

$(document).ready асинхронный Вы передаете ему функцию обратного вызова, чтобы она регистрировала факт готовности DOM. Тем не менее click код привязки выполняется сразу после установки ready обработчик, а не при выполнении обратного вызова.

Вам просто нужно убедиться, что вы поместили обязательную логику в 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

Если вы хотите, чтобы этот код выполнялся в событии "ready", просто переместите его туда.

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

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

То, как вы его определили прямо сейчас, не означает, что оно выполняется при загрузке DOM.