Question

为什么点击事件在这种情况下不会触发，虽然DOM似乎已加载（＆＃39;准备好＆＃39;在控制台中显示）？

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

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

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

Answer 1

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

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

Answer 2

您可以将代码直接放在$(document).ready()函数中，也可以在DOM准备就绪时创建一个绑定点击的新功能。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

如果您希望在＆＃34; ready＆＃34;中执行该代码。事件，把它移到那里。

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

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

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

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

3 个答案: