web-dev-qa-db-ja.com

JQuery - $が定義されていません

簡単なjquery clickイベントがあります

<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アプリです、私は本当に密集していると確信しています。 :/

420
Paul Creasey

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

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

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

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

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

これにより、コードが確実にロードされますafter jQueryが初期化されました。

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

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

523
Mike Trpcic

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

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

これは$が定義されていないために発生します

あなたの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>
182
Hanky Panky

まず、jQueryスクリプトがロードされていることを確認する必要があります。これはCDNからでも、Webサイト上のローカルからでも構いません。 jQueryを使おうとする前にこれを最初にロードしないと、jQueryが定義されていないことがわかります。 

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

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

次に、以下の2つの解決策のうちの1つを使用する必要があります。

(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}); は動作しません。

55
Andrew Killen

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

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

`

そのため、すべてのアセットがロードされると、コードはウィンドウのロード後にのみ実行されます。その時点で、jQuery($)が定義されます。

あなたがそれを使うならば:

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

`

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

35
dandapereira

私はちょうど同じことをしたと私は全体の多くを持っていたことがわかりました 

type="text/javacsript"

それで彼らはロードしていました、しかしそれがうまくいかなかった理由に関してそれ以上のヒントはありません。言うまでもなく、適切なつづりで修正しました。

26
George R

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

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

ビュー/ 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>
}

ビュー/共有/ _Layout.cshtml

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

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

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

18
angularsen

上記のように、それは$ variableの衝突が原因で起こります。

私は衝突しないでjQueryのために二次変数を予約することによってこの問題を解決しました。

var $j = jQuery.noConflict();

そしてそれをどこでも使う

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

詳細を見つけることができます ここ

8
Tough Guy

本当にjquery をロードしてください。これはnot 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>
8
Wolfgang Fahl

他のJavaScriptライブラリを使用していますか?もしそうなら、おそらく互換モードでjQueryを使う必要があるでしょう:

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

7
tambler

それはあなたのjQueryライブラリがまだロードされていないことを意味します。

あなたはjQueryライブラリを引っ張った後あなたのコードを動かすことができます。

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

window.onload = function(){
  // Your code here
};  
6
Nesar

JQueryリファレンスのスペルを間違えて、 "... javascirpt"と入力したtype="text/javascript"の代わりに同じエラーメッセージが表示されます。 ;)

4
alan

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

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

4
Alexender Dumma

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

<script>
$=jQuery;
</script>

それは非常にうまくいきます:)

3
Mimouni

そのエラーは、jQueryがまだページにロードされていないことを意味します。 $はjQuery関数なので、$(document).ready(...)またはその派生形を使用しても意味がありません。

window.onloadを使うことはここで働くべきです。 window.onloadに割り当てることができる関数は1つだけです。元のonloadロジックを失うことを避けるために、次のように元の関数を装飾することができます。

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

これは、元々window.onloadに割り当てられていた関数を実行し、次に// YOUR JQUERYを実行します。

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

3
Kyle McVay

解決策としては - "jQueryをロードする前にプラグインをロードしていないことを確認することが最後になります。ロードする前にプラグインをロードする場合はプラグインが" $ "オブジェクトを拡張します。 jQueryコア、それからあなたはあなたが説明したエラーを得るでしょう。」

これを避けるために -

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

2
user1284907

Url.Content を使用しても問題ありません。

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

JqueryのURLをjqueryのコードの上に置くだけ

このような -

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

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

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

アンソニー

1
Anthony

明白な理由もなく私は一度この問題を抱えていた。私はaspnet開発サーバーを介して実行している間それはローカルに起こっていました。それはうまくいっていたし、私はそれが以前に働いていたがそれでもうまくいかなかった状態にすべてを戻しました。私はクロムデバッガとjquery-1.7.1.min.jsを問題なくロードしました。とても混乱しました。私はまだ何が問題なのかわからないが、ブラウザを閉じ、開発用サーバを閉じ、そして再びそれを解決しようとした。

1
cedd

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

0
sc123

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

<head>
    @Scripts.Render("~/bundles/jquery")
</head>
0
BHOW

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

0
Gavin

scriptタグにdefer属性がある場合はエラーを表示します  

参照されないReferenceError:$が定義されていません

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

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

私の場合は、GoogleがホストするJQueryを指していました。これは正しく含まれていましたが、私はHTTPSページにいてHTTP経由でそれを呼び出しました。問題を解決すると(または安全でないコンテンツが許可されると)、すぐに問題が発生します。

0
Anthony

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

Views\Shared _Layout.htmlに移動して、以下を追加します。 

<head>
  <*@ Omitted code*@>
  <script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
</head>
0
Pat

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

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

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

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

0

私たちは同じ問題を抱えています....しかし誤って私はフォルダのプロパティをチェックして何かを設定しています...

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

  1. 右クリックフォルダ
  2. [権限]タブ
  3. フォルダアクセスを設定します。 OWNER:ファイルの作成と削除 GROUP:ファイルへのアクセス OTHERS:ファイルへのアクセス

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

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
amelian