21

I have a project where all the JS files are referenced in the footer, as is recommended for speed of page loading, including the link to the Jquery file. This code produces an "Uncaught ReferenceError", I assume because Jquery has not been defined before my script is called:

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

If I move the Jquery link to the header, then the code runs fine, but this will slow the page loading time.

Is there a better way to declare my function so that it does not throw this UncaughtReference error, or is keeping the Jquery link in the head the best solution?

4

5 回答 5

17

那是因为你在尝试使用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>

于 2013-04-17T15:22:37.293 回答
14

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

document.addEventListener("DOMContentLoaded", function(event) { 
      $(function(){
          $('#example').popover({ trigger:'hover' });
      });
});
于 2016-05-08T18:46:33.473 回答
7

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

于 2013-04-17T15:22:18.427 回答
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>

希望这对某人有用...

于 2016-02-11T16:56:59.070 回答
0

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

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

于 2013-04-17T15:23:43.853 回答