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

I have this code in jQuery: (the file name is javascript.js ...I was using JavaScript before...)

我在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');
 });
});

...and this in HTML:

...这在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>

When I check the console, I get the Uncaught ReferenceError saying that $ is not defined on the first line. I'm assuming that it is referring to the first character on the first line. I got this code from a website and I'm new to jQuery so I'm not sure what is going wrong here.

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

Any suggestions?

有什么建议么？

4 个解决方案

#1

Change the order you're including your scripts (jQuery first):

更改包含脚本的顺序（首先是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>

#2

Include the jQuery file first:

首先包含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

Scripts are loaded in the order you have defined them in the HTML.

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

Therefore if you first load:

因此，如果您首先加载：

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

without loading jQuery first, then $ is not defined.

首先不加载jQuery，然后定义$。

You need to first load jQuery so that you can use it.

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

I would also recommend placing your scripts at the bottom of your HTML for performance reasons.

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

#4

The MVC 5 stock install puts javascript references in the _Layout.cshtml file that is shared in all pages. So the javascript files were below the main content and document.ready function where all my $'s were.

MVC 5库存安装将javascript引用放在_Layout.cshtml文件中，该文件在所有页面*享。因此，javascript文件位于主要内容和document.ready函数之下，其中所有的$都是。

BOTTOM PART OF _Layout.cshtml:

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

I moved them above the @RenderBody() and all was fine.

我将它们移到@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>

#1