jQuery-$は定義されていません

486

単純なjqueryクリックイベントがあります

<script type="text/javascript">
    $(function() {
        $('#post').click(function() {
            alert("test"); 
        });
    });
</script>

そして、site.masterで定義されたjquery参照

<script src="<%=ResolveUrl("~/Scripts/jquery-1.3.2.js")%>" type="text/javascript"></script>

スクリプトが正しく解決されていることを確認しました。マークアップを表示してスクリプトをFirebugで直接表示できるので、見つけられる必要があります。しかし、私はまだ得ています：

$は定義されていません

そしてjqueryのどれも動作しません。$（document）.readyやjQueryなど、さまざまなバリエーションも試しました。

これは.net 3.5のMVC 2アプリです。Googleのどこにいても、ファイルが正しく参照されていることを確認するように言われています。：/

javascript  jquery  asp.net-mvc 
— ポール・クリーシー
ソース
6
Fiddlerツールでページの読み込みを調べた場合、jquery-1.3.2.jsが要求され、HTTP200応答コードが読み込まれたことが実際にわかりますか？
— ナイビスト
18
あなたのスクリプトはjqueryの前に実行されていますか？
— スーリヤ
2
ソースを表示して、jsリンクをクリックしてください。jqueryがページに読み込まれていないようです。Firebugコンソール画面を試してエラーを確認するスクリプトタグでajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsも試してください
— nemke
2
jqueryソースがロードされる前にスクリプトが起動していますか？
— Dave Bacher、2010
1
@ Surya / Dave、私は今家に帰ったので、また明日チェックアウトして戻ってきて投稿しますが、おそらく問題だと思います：/なんて恥ずかしい！
— ポールクリーシー

回答:

560

このエラーは、次の3つのうちのいずれかによってのみ発生します。

  1. JavaScriptファイルがページに正しく読み込まれていません
  2. 失敗したバージョンのjQueryがあります。これは、誰かがコアファイルを編集したか、プラグインが$変数を上書きしたために発生する可能性があります。
  3. ページが完全に読み込まれる前、つまりjQueryが完全に読み込まれる前にJavaScriptが実行されています。

まず最初に、どのスクリプトが適切に呼び出されているかを確認します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

また、asyncまたはdefer属性を設定しないでください。

次に、Firebug ネットパネルをチェックして、ファイルが実際に正しくロードされているかどうかを確認する必要があります。そうでない場合は、赤で強調表示され、その横に「404」と表示されます。ファイルが適切に読み込まれている場合、問題は2番であることを意味します。

すべてのjQuery JavaScriptコードが次のようなコードブロック内で実行されていることを確認してください。

$(document).ready(function () {
  //your code here
});

これにより、jQueryが初期化された後にコードが確実に読み込まれます。

最後に確認することは、jQueryをロードする前にプラグインをロードしていないことを確認することです。プラグインは「$」オブジェクトを拡張するため、jQueryコアをロードする前にプラグインをロードすると、説明したエラーが発生します。

注： jQueryの実行を必要としないコードをロードする場合は、jQuery対応ハンドラー内に配置する必要はありません。そのコードは、を使用して分離できますdocument.readyState。

— マイク・トルプチッチ
ソース
182
コードブロックに関して$(document)は、そのステートメントの前にjQueryを含むスクリプトタグがないと機能しません...
— PatrikAkerstrand
3
OPと同じ問題があり、jqueryのライブラリでhttpsを使用するとうまく機能しないという問題があったことを付け加えておきます。
— Mike Cheel、2011年
20
（関数（$）{}）（jQuery）;
— JackMahoney 2013
2
@Patrik：ビューのスクリプトセクションを使用した解決策については、私の回答を参照してください。この方法では、jqueryが最初にロードされ、$が適切に定義されます。
— angularsen 2013
1
スクリプトにも非同期があるかどうかを確認してください。それが私の場合の問題の原因です。
— アンデルス
207

jqueryスクリプトが呼び出される前にスクリプトタグが呼び出されている可能性があります。

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

$が定義されていないため、この結果

jquery.jsをスクリプトタグの前に置くと、次のように機能します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="js/script.js"></script>
— ハンキーパンキー
ソース
1
これは素晴らしい反応です。試してみましたが、うまくいきました。VS 2013とASP.netを使用しています。ページがasp.netに自動的にロードされる前にJavaScriptをロードする方法を知っていますか、またはすべてのファイルでこのようにJavaScriptを参照する必要がありますか？
— パット
あなたの答えに追加します。ASP.netでは、Shared_Layout.cshtml `<head> </ head>`にアクセスできます
— Pat
@patして、@section Scriptsタグ内にコードを記述してください
— Marc
HTTPSを使用するように回答を更新し、SPI devdocs.io/html/attributes#integrity-attributeの
— Josh Habdas
66

最初に、jQueryスクリプトがロードされていることを確認する必要があります。これは、CDNまたはWebサイトのローカルにある可能性があります。jQueryを使用する前にこれをロードしないと、jQueryが定義されていないことがわかります。

<script src="jquery.min.js"></script>

これはHEADまたはページのフッターにある可能性があります。他のjQueryのものを呼び出す前に、必ずロードしてください。

次に、以下の2つのソリューションのいずれかを使用する必要があります

(function($){
// your standard jquery code goes here with $ prefix
// best used inside a page with inline code, 
// or outside the document ready, enter code here
 })(jQuery);

または

jQuery(document).ready(function($){
// standard on load code goes here with $ prefix
// note: the $ is setup inside the anonymous function of the ready command
});

何度も注意してください$（document）.ready（function（）{// code here}）; 動作しないでしょう。

— アンドリューキレン
ソース
1
「jQueryが定義されていません」。ただし、ページのロード後に存在します。
— Paul Totzke 2016年
これが質問なのかステートメントなのかはわかりませんが、jQueryスクリプトを使用する前に呼び出しを行うことを確認します。フッターにそれをロードし、ページの上位にあるものを呼び出すように聞こえます。
— Andrew Killen
すみません、これはスクリプトを任意の順序で使用できる手法だと思いました。はい、これをMVCスタイルの本文セクションで使用していました。mycode.jsとjQuery.jsがページの最後の2つです。
— Paul Totzke 2016年
Paulさん、心配はいりません。ソリューションを編集して、「最初にロードする必要があります」を含めました。:)
— Andrew Killen
これにより、「スクリプトは正しい順序であるが、スクリプトが異なる順序でロードされる」という問題が修正されますか？4年前にこういうことをしたのを覚えていますが、何の問題が解決したのか思い出せません。
— Paul Totzke 2016年
50

jQueryプラグインの呼び出しがの横にあり</body>、その前にスクリプトが読み込まれている場合はwindow.onload、次のように、イベントの後にコードを実行する必要があります。

window.onload = function() {
  //YOUR JQUERY CODE
}

`

したがって、すべてのアセットが読み込まれたときに、ウィンドウの読み込み後にのみコードが実行されます。その時点で、jQuery（$）が定義されます。

それを使用する場合：

$(document).ready(function () {
  //YOUR JQUERY CODE
});

`

$まだそれはjQueryのがロードされる前に呼び出され、スクリプトがコンソール上にその最初の行に失敗するので、この時点で定義されていません。

— ダンダペレイラ
ソース
一般に、window.unloadに関連付けることはお勧めできません。それは事実上、実行される唯一のイベントになります!!!
— Rudi Strydom
注：割り当てることができるwindow.onload関数は1つだけであることに注意してください。別の関数を割り当てた場合、前の関数は実行されません。
— Bruno Peres、2016年
28

同じことをしただけで 

type="text/javacsript"

それで彼らはロードしていましたが、なぜそれが機能しなかったかについてのそれ以上のヒントはありません。言うまでもなく、適切なスペルによって修正されました。

— ジョージR
ソース
モデレーターのメモ：この投稿のタイプミスは、ポイントを説明するための意図的なものです。これを「修正」するために投稿を編集しないでください。
— Martijn Pieters
23

ビューとマスターレイアウトでスクリプトセクションを使用します。

ビューで定義されているすべてのスクリプトを、ビューのスクリプトセクション内に配置します。これにより、他のすべてのスクリプトが読み込まれた後に、マスターレイアウトを読み込むことができます。これは、新しいMVC5 Webプロジェクトを開始するときのデフォルトのセットアップです。以前のバージョンについては不明です。

Views / Foo / MyView.cshtml：

// The rest of your view code above here.

@section Scripts 
{ 
    // Either render the bundle defined with same name in BundleConfig.cs...
    @Scripts.Render("~/bundles/myCustomBundle")

    // ...or hard code the HTML.
    <script src="URL-TO-CUSTOM-JS-FILE"></script>

    <script type="text/javascript">
      $(document).ready(function () {

        // Do your custom javascript for this view here. Will be run after 
        // loading all the other scripts.            
      });
    </script>
}

Views / Shared / _Layout.cshtml

<html>
<body>
    <!-- ... Rest of your layout file here ... -->

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

スクリプトセクションがマスターレイアウトファイルの最後にレンダリングされる方法に注意してください。

— Anglesen
ソース
2
注：ビューセクションは、部分的なビューでは設計上サポートされていません。
— Adam Naylor
これは私が修正のためにしなければならなかったことです...そして、@ Scriptsを最初に使用する方が良いことを知っているはずですが、修正を探すまでそれを忘れていました。
— Caverman
12

実際にjqueryをロードしていることを確認してください。これはjqueryではありません -UIです！

  <script language="JavaScript" 
    src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js">
  </script>

これはjqueryの正しいスクリプトソースです。

 <script language="JavaScript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
— ヴォルフガングファール
ソース
11

上記のように、これは$変数の競合が原因で発生します。

この問題は、jQueryの2次変数を競合なしで予約することで解決しました。

var $j = jQuery.noConflict();

そしてどこでもそれを使用します

$j( "div" ).hide();

詳細はこちら

— ネイビーアッバス
ソース
8

これは、jQueryライブラリがまだ読み込まれていないことを意味します。

jQueryライブラリをプルした後、コードを移動できます。

またはあなたはこのようなものを使うことができます

window.onload = function(){
  // Your code here
};
— ネザール
ソース
これはDOMが読み込まれた後に発生しますが、バックグラウンドで実行されているコントロール、JavaScript、その他のプログラムが読み込まれたときは発生しません。これを機能させるには、時間遅延を使用する必要があります。
— Fandango68
5

いくつかのテストの後、私は速い解決策を見つけました、あなたはあなたのインデックスページの上に追加することができます：

<script>
$=jQuery;
</script>

それはとてもうまくいきます:)

— ミモウニ
ソース
4
質問は：$は定義されていません、いいえ？
— Mimouni
Uncaught ReferenceError：jQuery is not defined
— Simon Schnell
jQueryライブラリインポートのすぐ下に配置しましたか？
— マイクウォーレン
4

jQueryの参照のスペルを間違えてtype="text/javascript"「... javascirpt」と入力する代わりに、同じエラーメッセージが表示されました。;）

— アラン
ソース
ユーレカ！私はとして私のものを持っていましたtype="text/css"。私の正気を救ってくれてありがとう！
— ジェリコ
私は間抜けでしたtype="javascript"。それを見つけるのに30分も無駄にした。
— メイソン
4

jQueryが正しくロードされていないようです。どのソース/バージョンを使用していますか？

または、名前空間の衝突である可能性があるため、を使用する代わりに、jQueryを明示的に使用してみてください$。それが機能する場合は、使用noConflictしている他のコードが$壊れないようにするために使用することをお勧めします。

— アレクセンダードゥマ
ソース
3

そのエラーは、jQueryがまだページにロードされていないことを意味します。jQuery関数$(document).ready(...)と同様に、またはそのバリアントを使用しても効果がありません$。

window.onloadここで使用する必要があります。に割り当てられる機能は1つだけであることに注意してくださいwindow.onload。元のonloadロジックが失われないようにするために、次のように元の関数を修飾できます。

originalOnload = window.onload;
window.onload = function() {
  if (originalOnload) {
    originalOnload();
  }
  // YOUR JQUERY
};

これによりwindow.onload、最初にに割り当てられていた関数が実行され、次に実行され// YOUR JQUERYます。

デコレータパターンの詳細については、https：//en.wikipedia.org/wiki/Decorator_patternを参照してください。

— カイル・マクベイ
ソース
2

私はUrl.Contentを使用しており、問題はありません。

<script src="<%= Url.Content ("~/Scripts/jquery-1.4.1.min.js") %>" type="text/javascript"></script>
— mdm20
ソース
2

ソリューションではそれが言及されています-「チェックする最後の1つのことは、jQueryをロードする前にプラグインをロードしていないことを確認することです。プラグインは「$」オブジェクトを拡張するため、jQueryコアをロードする前にプラグインをロードすると、説明したエラーが表示されます。」

これを避けるために-

多くのJavaScriptライブラリは、jQueryと同じように、$を関数または変数名として使用します。jQueryの場合、$はjQueryの単なるエイリアスであるため、$を使用しなくてもすべての機能を使用できます。jQueryと一緒に別のJavaScriptライブラリを使用する必要がある場合は、$。noConflict（）を呼び出して、$の制御を他のライブラリに戻すことができます。

1

明らかな理由もなくこの問題を一度経験しました。これは、aspnet開発サーバーを実行しているときにローカルで発生していました。動作していたので、以前は動作していたのに動作しない状態にすべてを戻しました。Chromeデバッガーを調べたところ、jquery-1.7.1.min.jsは問題なく読み込まれていました。それはすべて非常に混乱しました。私はまだ問題が何であったかわかりませんが、ブラウザーを閉じて、開発サーバーを閉じてから、もう一度整理してみます。

— セッド
ソース
1

jqueryコードの上部にjquery URLを配置するだけです

このような - 

<script src="<%=ResolveUrl("~/Scripts/jquery-1.3.2.js")%>" type="text/javascript"></script>

<script type="text/javascript">
    $(function() {
        $('#post').click(function() {
            alert("test"); 
        });
    });
</script>
— Vikrantx
ソース
1

私は同じ問題を抱えていましたが、それはjQuery.jsへの私の参照がタグになかったためです。それを切り替えると、すべてが機能し始めました。

アンソニー

— アンソニー
ソース
1

  1. jqueryファイルの正確なパスが含まれていることを確認してください。

    <script src="assets/plugins/jquery/jquery.min.js"></script>

これをページの下部に追加する場合は、すべてこの宣言の下でJS関数を呼び出してください。

  1. このコードテストを使用して確認してください、

    <script type="text/javascript">
/***
 * Created by dadenew
 * Submit email subscription using ajax
 * Send email address
 * Send controller
 * Recive response
 */
$(document).ready(function() { //you can replace $ with Jquery

  alert( 'jquery working~!' );
});

平和！

— ダニエル・アデニュー
ソース
0

同じ問題がありますが、誤ってフォルダのプロパティをチェックして何かを設定しました...

アクセスしている各フォルダのプロパティを確認する必要があります。

  1. フォルダを右クリック
  2. 「許可」タブ
  3. フォルダーアクセスを設定します。OWNER：ファイルの作成と削除GROUP：ファイルへのアクセスその他：ファイルへのアクセス

これが解決策であることを願っています......

— RoyS_philippines
ソース
0

asp.netでjQueryを使用する場合、マスターページを使用していて、そこにjqueryソースファイルをロードする場合は、すべてのjqueryスクリプト参照の後にヘッダーcontentplaceholderがあることを確認してください。

不正な順序がjqueryオブジェクトが作成される前にクライアント側のコードを実行させているために、そのマスターページを使用するページが「$ is not defined」を返すという問題がありました。だからあなたが持っていることを確認してください：

<head runat="server">
    <script type="text/javascript" src="Scripts/jquery-VERSION#.js"></script>
    <asp:ContentPlaceHolder id="Header" runat="server"></asp:ContentPlaceHolder>
</head>

これにより、コードが順番に実行され、子ページでjQueryコードを実行できるようになります。

— フランシス・ムジニャック
ソース
0

私の場合、GoogleがホストするJQueryを指していた。それは適切に含まれていましたが、私はHTTPSページにいてHTTP経由でそれを呼び出していました。問題を修正（または安全でないコンテンツを許可）すると、すぐに起動しました。

— アンソニー
ソース
0

私はこれと同じ問題を抱えていて、それを引き起こしている原因を理解できませんでした。最近、HTMLファイルを日本語からUTF-8に変換しましたが、スクリプトファイルには何もしていません。どういうわけか、jquery-1.10.2.min.jsはこのプロセスで破損しました（私はまだどうすればよいかわかりません）jquery-1.10.2.min.jsをオリジナルに置き換えて修正しました。

— ギャビン
ソース
0

jquery.jsファイルを同じフォルダーまたはhtmlファイルのあるサブフォルダーに配置すると、Firebugの問題が解決したようです。たとえば、htmlがC：/ folder1 /の下にある場合、jsファイルはC：/ folder1 /（またはC：/ folder1 / folder2など）のどこかにあり、htmlドキュメントでそれに応じてアドレス指定されている必要があります。お役に立てれば。

— sc123
ソース
0

私は同じ問題を抱えており、問題を解決するケースはありません。私のために働く唯一のものは、Site.masterファイルの次のものに置かれます：

<script src="<%= ResolveUrl("~/Scripts/jquery-1.7.1.min.js") %>" type="text/javascript"></script>
<script src="<%= ResolveUrl("~/Scripts/bootstrap/js/bootstrap.min.js") %>" type="text/javascript"></script>

src = "<％= ResolveUrl（" "）...を使用すると、コンテンツページでのjQueryのロードは正しいです。

— アメリアン
ソース
0

非常によく似た問題がありました。私のC＃MVCアプリケーションでは、JQueryが認識されませんでした。@ Scripts.Render（ "〜/ bundles / jquery"）を_Layout.cshtmlファイルの下部からセクションの先頭に移動する必要がありました。また、ビジュアルスタジオを使用している場合は、JqueryをNugetパッケージとして取得したことを確認してください。

<head>
    @Scripts.Render("~/bundles/jquery")
</head>
— 方法
ソース
0

残りのコードを実行する前に、JavaScriptを自動的にロードする方法があります。

Views \ Shared_Layout.htmlに移動し、以下を追加します 

<head>
  <*@ Omitted code*@>
  <script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
</head>
— パット
ソース
0

場合script、タグが持つdefer属性をそれがエラーを表示します

キャッチされていないReferenceError：$が定義されていません

タグdeferから属性を削除する必要がありますscript

— アブドゥルアフマド・マティン
ソース
0

これはこれを解決するための一般的な問題であり、いくつかのポイントを確認する必要があります

  1. メインJQueryライブラリを含める
  2. クロスブラウザの問題を確認する
  3. jqueryコードのTOPにライブラリを追加します
  4. CDNがブロックされている可能性があることを確認します。

詳細はこのブログに記載されています。ここをクリック

— アンジュ・バッタ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.