未捕获的 ReferenceError：$ 在 jQuery 中未定义错误答案

【问题标题】：Uncaught ReferenceError: $ is not defined error in jQuery未捕获的 ReferenceError：$ 在 jQuery 中未定义错误
【发布时间】：2014-01-17 16:13:03
【问题描述】：

我在jQuery 中有这段代码：（文件名是 javascript.js ...我之前使用的是 JavaScript...）

$(document).ready(function() {
 $("#readFile").click(function() {
    $.get('test.txt', function(data) {
      $("#bottom_pane_options").html(data); // #bottom_pane_options is the div I want the data to go
    }, 'text');
 });
});

...在 HTML 中：

<!DOCTYPE html>
<html>
<head>
    <title>Culminating</title>
    <link href="style.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="./javascript.js"></script>
    <script
        src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCJnj2nWoM86eU8Bq2G4lSNz3udIkZT4YY&sensor=false">
    </script>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>


    <script>
        function initialize()
        {
        var mapProp = {
          center:new google.maps.LatLng(50.569283,-84.378433),
          zoom:5,
          mapTypeId:google.maps.MapTypeId.TERRAIN
          };
        var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>

<body>
    <div class="content">
        <div id="googleMap"></div>
        <div id="right_pane_results">hi</div>
        <div id="bottom_pane_options">
            <button id="readFile">Read File</button>
        </div>
    </div>
</body>

当我检查控制台时，我得到Uncaught ReferenceError 说$ 没有在第一行定义。我假设它指的是第一行的第一个字符。我从一个网站获得了这段代码，我是jQuery 的新手，所以我不确定这里出了什么问题。

有什么建议吗？

【问题讨论】：

你应该首先包含 jQuery
尝试在您的 html 内容末尾添加您自己的代码脚本，在您关闭

标签： javascript jquery html file-io

【解决方案1】：

更改包含脚本的顺序（首先是 jQuery）：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="./javascript.js"></script>
<script
    src="http://maps.googleapis.com/maps/api/js?key=YOUR_APIKEY&sensor=false">
</script>

【讨论】：

谢谢。你的回答解决了这个问题。但现在我收到一条错误消息，提示我缺少 Access-Control-Allow-Origin 标头。我知道我需要添加Allow-Control-Access-Origin: *，但我不确定放在哪里。

【解决方案2】：

首先包含 jQuery 文件：

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
 <script type="text/javascript" src="./javascript.js"></script>
    <script
        src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCJnj2nWoM86eU8Bq2G4lSNz3udIkZT4YY&sensor=false">
    </script>

【讨论】：

【解决方案3】：

脚本按照您在 HTML 中定义的顺序加载。

因此，如果您首先加载：

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

先不加载 jQuery，然后再加载 $ is not defined。

你需要先加载 jQuery 才能使用它。

出于性能原因，我还建议您将脚本放在 HTML 的底部。

【讨论】：

...按顺序加载和解释。 OP 的假设似乎是它们只有在全部加载后才会被解释。

【解决方案4】：

MVC 5 stock install 将 javascript 引用放在所有页面共享的 _Layout.cshtml 文件中。因此，javascript 文件位于我所有 $ 所在的主要内容和 document.ready 函数下方。

_Layout.cshtml 的底部：

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)

</body>
</html>

我把它们移到了 @RenderBody() 一切都很好。

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

</body>
</html>

【讨论】：