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

【问题标题】：Jquery does not work in html file but works in .js fileJquery 在 html 文件中不起作用，但在 .js 文件中起作用
【发布时间】：2015-01-10 16:47:37
【问题描述】：

当我有 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 之前以某种方式加载的，但它没有意义，因为文件导入工作正常。有什么想法吗？

【问题讨论】：

尝试删除您的 defer 属性，它可能会阻止脚本运行。
好奇你遇到了什么错误，我从不使用defer

标签： javascript jquery xhtml

【解决方案1】：

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

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

【讨论】：

没错。我尝试单独从 html 脚本中删除 defer 属性，但它没有用。我必须从所有导入中删除 defer 才能正常工作。关于如何在 html 解析期间加载脚本并在页面加载后不使用 defer 执行它们的任何想法？
@Sikor 是的，看看我的回答，使用window.onload，尽管我认为jQuery 的.ready() 函数无论如何都应该为你做到这一点。

【解决方案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>

【讨论】：

它是 xhtml，所以需要值。
添加 window.onload 使其工作。快速谷歌搜索后，一旦 html 结束解析，jquery 的 .ready 就会执行，而 window.onload 会在所有内容加载后执行。因此，使用 window.onload 我可以推迟其他脚本。谢谢。
在接受答案之前，我做了更多的测试。太不耐烦了：D