未捕获的 ReferenceError：当 jquery.js 位于文档末尾时未定义 $答案

【问题标题】：Uncaught ReferenceError: $ is not defined when jquery.js is at end of document未捕获的 ReferenceError：当 jquery.js 位于文档末尾时未定义 $
【发布时间】：2013-04-10 10:44:10
【问题描述】：

我有一个项目，其中所有 JS 文件都在页脚中引用，这是为了加快页面加载速度而推荐的，包括指向 Jquery 文件的链接。这段代码会产生一个“未捕获的 ReferenceError”，我假设是因为在调用我的脚本之前尚未定义 Jquery：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    </head>
    <body>
        <p>
            <a href="#" data-toggle="popover" title="first popover" id="example">hover over me</a>
        </p>
        <script type="text/javascript"> 
            $(function(){
                $('#example').popover({ trigger:'hover' });
            })
        </script>

        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </body>
</html>

如果我将 Jquery 链接移动到标题，则代码运行良好，但这会减慢页面加载时间。

有没有更好的方法来声明我的函数，这样它就不会抛出这个 UncaughtReference 错误，或者将 Jquery 链接保留在头部是最佳解决方案？

【问题讨论】：

在开始依赖所述脚本编写代码之前，您必须加载脚本。
Uncaught ReferenceError: $ is not defined?的可能重复

标签： jquery html dom

【解决方案1】：

您需要在引用 jQuery 库之前包含 jQuery。

改成这样：

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

<script type="text/javascript"> 
$(function(){
   $('#example').popover({ trigger:'hover' });
});
</script>

还请注意，最好在文档的页脚中包含 jQuery 和其他 JavaScript，以确保页面呈现不会延迟。

【讨论】：

好的。由于项目限制（应用程序生成的代码），脚本内容的 DOM 位置是不可协商的，所以我猜我将不得不将 JQuery 放在标题中。
@Ali：不一定，看我的回答。

【解决方案2】：

这是因为您在加载 jQuery 之前尝试使用 jQuery。您需要将 jQuery 之类的库放在文档的开头

<head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>

通常，您的脚本位于文档末尾靠近正文标记和库的位置，例如您正在使用的库，位于 <head>

【讨论】：

不一定在head；就在任何其他依赖 jQuery 的 JavaScript 之前。
谢谢，这回答了我问的问题：在这种情况下，由于脚本将包含在文档正文中，我无法移动它们，调用 JQuery 的最佳位置是头。

【解决方案3】：

脚本从文档的顶部到底部按顺序执行，因此您试图在加载之前引用 jQuery 库。

要解决这个问题，您可以将自己的脚本放在一个单独的文件中，然后在 jQuery 库之后导入它们，或者将您的脚本标签放在 jQuery 导入下方。

【讨论】：

【解决方案4】：

最近在 jsTree 网站上我看到了另一种技术

在顶部（在 HEAD 标记中）你设置了这个：

<script>window.$q=[];window.$=window.jQuery=function(a){window.$q.push(a);};</script>

现在你可以做<script>$(function () { /* your $() calls here */ });</script> 随时随地...

最后包含 jquery.js 作为 usal 然后最后一个脚本是：

<script>$.each($q,function(i,f){$(f)});$q=null;</script>

希望这对某人有用...

【讨论】：

【解决方案5】：

我喜欢将 jquery 放在底部，您只需要确保首先加载整个 DOM，并在没有 jQuery 的情况下检查它，因为它还不能使用。尝试改用这个：

document.addEventListener("DOMContentLoaded", function(event) { 
      $(function(){
          $('#example').popover({ trigger:'hover' });
      });
});

【讨论】：

您是否需要在事后随时删除此侦听器？