为什么 jQuery 事件在外部就绪函数时不触发，即使在文档准备好之后？

Question

尽管 DOM 似乎已加载（'ready' 显示在控制台中），为什么在这种情况下没有触发点击事件？

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

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

我的理解是，因为点击事件的代码是在文档就绪功能被正确执行之后，它应该可以工作，但实际上没有。只有当 event 包含在 ready 函数的花括号之间时，它才会起作用。

Answer 1

您可以将代码直接放在 $(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 2

如果您希望在 "ready" 事件中执行该代码，只需将其移动到那里即可。

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

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

您现在定义它的方式并不意味着它在加载 DOM 时执行。

Answer 3

$(document).ready 是异步的。您正在向它传递一个回调函数，以便它记录 DOM 已准备就绪的事实。但是，click 绑定代码在您设置 ready 处理程序后立即执行，而不是在执行回调时执行。

您只需确保将绑定逻辑放在 ready 处理程序中。

为什么 jQuery 事件在外部就绪函数时不触发，即使在文档准备好之后？

Why jQuery event not firing when outside ready function, even after document is ready?

javascript

jquery

document-ready