为什么即使在文档准备好之后，即使在准备好的功能之外，jQuery 事件也不会触发？答案

【问题标题】：Why jQuery event not firing when outside ready function, even after document is ready?为什么即使在文档准备好之后，即使在准备好的功能之外，jQuery 事件也不会触发？
【发布时间】：2017-01-15 19:29:42
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript jquery document-ready

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

如果您希望在“就绪”事件中执行该代码，只需将其移到那里即可。

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

这很有用。肯定会使用这种技术，因为它使代码更清晰，文件顶部有函数原型。荣誉。
@MarcinLentner - 正是:) - 很高兴你的问题得到了解决。