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 仅对外部脚本有效。您可以为页内脚本声明属性延迟，但浏览器不会考虑它。

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

Answer 2

直接来自w3schools（和MDN）：

注意：defer属性仅适用于外部脚本（仅当存在src属性时才应使用）。

因此，基本上，如果没有外部脚本，则无法使用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文件中起作用

2 个答案: