Question

我有一个项目，其中所有JS文件都在页脚中引用，建议用于页面加载的速度，包括指向Jquery文件的链接。这段代码会产生一个“Uncaught 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链接保留在头部是最佳解决方案？

Answer 1

这是因为您在加载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>

附近找到

Answer 2

我喜欢将jquery保留在底部，你只需要确保首先加载整个DOM，并检查没有jQuery，因为它还不可用。请尝试使用此代码：

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

Answer 3

在引用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，以确保不会延迟页面呈现。

Answer 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>

希望这对某人有用......

Answer 5

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

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

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

5 个答案: