Jquery 在 html 文件中不起作用，但在 .js 文件中起作用

Question

当我有 test.js 文件并导入脚本时：

<script defer="defer" src="/js/test.js"></script>

一切正常...但是如果我将 html 中的上述行更改为：

<script defer="defer">
    $(document).ready(function () {
        $(".overviewPilotPortraitImage").click(function () {
            alert("Hello world!");
        });
    });
</script>

它不再起作用了。 test.js 包含与上面完全相同的脚本，只是没有脚本标签。
是的，我确定完全一样。

带有 test.js 文件的头标签 - 工作：

<head>
<title>Placeholder - Overview</title>
<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<script defer="defer" src="/js/jquery-1.11.1.min.js"></script>
<script defer="defer" src="/js/bootstrap.min.js"></script>
<script defer="defer" src="/js/test.js"></script>
</head>

html 中带有脚本的头部标记 - 不工作：

<head>
<title>Placeholder - Overview</title>
<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<script defer="defer" src="/js/jquery-1.11.1.min.js"></script>
<script defer="defer" src="/js/bootstrap.min.js"></script>
<script defer="defer">
    $(document).ready(function () {
        $(".overviewPilotPortraitImage").click(function () {
            alert("Hello world!");
        });
    });
</script>
</head>

首先，我认为脚本以某种方式在 Jquery 之前加载，但它没有意义，因为文件导入工作正常。有什么想法吗？

Answer 1

那是因为 defer 只对外部脚本有效。您可以为页内脚本声明 defer 属性，但浏览器不会考虑它。

在您的第二个示例中，您的页内代码会立即执行，而 jquery 在页面加载完成后加载。更多 here.

Answer 2

直接来自 w3schools (and MDN):

Note: The defer attribute is only for external scripts (should only be used if the src attribute is present).

所以，基本上，如果没有外部脚本，您将无法使用 defer 属性。

或许可以尝试添加 window.onload:

<script>
window.onload = function(){
    $(document).ready(function () {
        $(".overviewPilotPortraitImage").click(function () {
            alert("Hello world!");
        });
    });
}
</script>

并将您的脚本标签放在正文而不是头部。

<body>
  <!--
    bla - bla - bla
  -->
  <script>
    // tags can go here
  </script>
</body>

Jquery 在 html 文件中不起作用，但在 .js 文件中起作用

Jquery does not work in html file but works in .js file

javascript

xhtml

jquery