web-dev-qa-db-ja.com

不明なReferenceError：$はjQueryで定義されていないエラーです

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が初めてなので、ここで何が間違っているのかわかりません。

助言がありますか？

javascriptjqueryhtmlfile-io
9
user3015565

スクリプトを含める順序を変更します（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>
41
j08691

スクリプトは、HTMLで定義した順序でロードされます。

したがって、最初にロードする場合：

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

最初にjQueryをロードせず、次に$ is not defined。

最初にjQueryをロードして、使用できるようにする必要があります。

パフォーマンス上の理由から、スクリプトをHTMLの下部に配置することもお勧めします。

7
MMM

最初に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>
7
Saravana

MVC 5の標準インストールでは、すべてのページで共有される_Layout.cshtmlファイルにJavaScript参照が配置されます。したがって、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>
1
JustJohn