Question

考虑以下html ..

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="test.js"></script>
    </head>
    <body>
        <button id="mybutton" type="button">submit</button>
    </body>
</html>

...当我尝试在test.js中为按钮的click事件实现jQuery事件处理程序时...

$("#mybutton").on("click", function (event) {
    alert("clicked");
});

......它不起作用。但是，如果我将文件包装成文件准备好，如...

$(document).ready(function () {
    $("#mybutton").on("click", function (event) {
        alert("clicked");
    });
});

......它有效。这是为什么？是否所有事件处理程序都准备好放在文档中？寻找一致的方法。

我希望尽可能使用jQuery。我很难用jQuery理解函数的范围。我已经看到一些人们主张将脚本定义放在html <head>中的情况，其他人已经将其放在身体底部以便更好地确定范围，但我显然很难理解为什么。

Answer 1

这是因为您的JavaScript可能在页面上显示内容之前运行。例如，如果你的脚本在头脑中，这很常见。通过将其置于就绪处理程序中，您可以确保实际上可以选择元素。如果在元素存在之前运行，则将单击处理程序附加到空的按钮列表中。

$("#mybutton").on("click", function (event) {
  alert("clicked");
});

Answer 2

由于浏览器自上而下读取JavaScript文件，因此在加载HTML文件之前会读取脚本。

你的脚本在头脑中。最佳做法是将脚本放在正文的底部。原因是，因为脚本在头部，脚本将在HTML文档加载之前加载。这有两个原因：

当脚本运行以添加事件侦听器时，该按钮不存在，因此当按钮加载时，它不会执行任何操作
如果你有一个庞大的JavaScript文件，你将创造一个糟糕的用户体验。在加载HTML内容之前，将强制用户等待脚本加载。

如果您将JavaScript文件放在页面底部，页面会加载，用户至少可以开始与页面进行交互，并且将加载所有DOM元素，并且您的JavaScript可以正常工作。

或者，您可以使用$(document).ready()在文档加载时触发事件。这使得javascript不会被触发，直到文档加载完毕。因此，当您的脚本运行时，有一个按钮，事件监听器成功附加到按钮，脚本可以工作。

简而言之，$(document).ready()确保在脚本运行之前加载html文档，并将<script>标记放在页面底部，同时确保在之前加载html文档脚本运行。

为什么我必须在$（document）.ready（）中为按钮点击事件放置我的jquery函数？

2 个答案: