JQuery - $ ist nicht definiert

486

Ich habe ein einfaches jquery click event

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

und eine in site.master definierte jquery-Referenz

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

Ich habe überprüft, ob das Skript korrekt aufgelöst wird. Ich kann das Markup sehen und das Skript direkt in Firebug anzeigen. Ich muss also gefunden werden. Ich bekomme jedoch immer noch:

$ ist nicht definiert

und keine der Fragen funktioniert. Ich habe auch die verschiedenen Variationen davon ausprobiert, wie $ (document) .ready und jQuery usw.

Es ist eine MVC 2-App auf .net 3.5. Ich bin mir sicher, dass ich sehr dicht bin. Überall auf Google heißt es, dass überprüft wird, ob die Datei korrekt referenziert ist. Ich habe sie überprüft und erneut überprüft. Bitte raten Sie! : /

Paul Creasey
quelle
6
Sehen Sie tatsächlich die angeforderte und mit HTTP200-Antwortcode geladene jquery-1.3.2.js, wenn Sie das Laden der Seite mit dem Fiddler-Tool überprüfen?
Naivisten
18
Wird Ihr Skript vor jquery ausgeführt?
Surya
2
Können Sie die Quelle anzeigen und auf js Link klicken? Scheint, als ob Ihre Abfrage nicht auf der Seite geladen ist. Versuchen Sie Firebug Console Screen, um Fehler zu sehen Versuchen Sie auch ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js in Ihrem Skript-Tag
nemke
2
Wird Ihr Skript ausgelöst, bevor die jquery-Quelle geladen wird?
Dave Bacher
1
@ Surya / Dave, ich bin jetzt nach Hause gegangen, also werde ich es morgen noch einmal überprüfen und zurückkommen und posten, aber ich denke, das ist wahrscheinlich das Problem: / wie peinlich!
Paul Creasey

Antworten:

560

Dieser Fehler kann nur durch eines von drei Dingen verursacht werden:

  1. Ihre JavaScript-Datei wird nicht ordnungsgemäß in Ihre Seite geladen
  2. Sie haben eine verpfuschte Version von jQuery. Dies kann passieren, weil jemand die Kerndatei bearbeitet hat oder ein Plugin die Variable $ überschrieben hat.
  3. Sie haben JavaScript ausgeführt, bevor die Seite vollständig geladen ist, und als solches, bevor jQuery vollständig geladen ist.

Stellen Sie zunächst sicher, dass das Skript, das ordnungsgemäß aufgerufen wird, so aussehen sollte

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

und sollte keine asynchronen oder verzögerten Attribute haben .

Überprüfen Sie anschließend das Firebug- Netzfenster, um festzustellen, ob die Datei tatsächlich ordnungsgemäß geladen wird. Wenn nicht, wird es rot hervorgehoben und daneben steht "404". Wenn die Datei ordnungsgemäß geladen wird, bedeutet dies, dass das Problem Nummer 2 ist.

Stellen Sie sicher, dass der gesamte JQuery-Javascript-Code in einem Codeblock ausgeführt wird, z.

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

Dadurch wird sichergestellt, dass Ihr Code nach der Initialisierung von jQuery geladen wird.

Als letztes müssen Sie überprüfen, ob Sie keine Plugins laden, bevor Sie jQuery laden. Plugins erweitern das Objekt "$". Wenn Sie also vor dem Laden des jQuery-Kerns ein Plugin laden, wird der von Ihnen beschriebene Fehler angezeigt.

Hinweis: Wenn Sie Code laden, für dessen Ausführung jQuery nicht erforderlich ist, muss er nicht im jQuery-fähigen Handler abgelegt werden. Dieser Code kann mit getrennt werden document.readyState.

Mike Trpcic
quelle
182
In Bezug auf Ihren Codeblock $(document)wird auch nicht funktionieren, es sei denn, Sie haben ein Skript-Tag einschließlich jQuery vor dieser Anweisung ...
PatrikAkerstrand
3
Ich möchte hinzufügen, dass ich das gleiche Problem wie das OP hatte und mein Problem war, dass die Verwendung von https mit der Bibliothek von jquery nicht so gut funktioniert.
Mike Cheel
20
(function ($) {}) (jQuery);
JackMahoney
2
@Patrik: In meiner Antwort finden Sie eine Lösung mit einem Skriptabschnitt in der Ansicht. Auf diese Weise wird jquery zuerst geladen und $ ist richtig definiert.
Angularsen
1
Überprüfen Sie, ob das Skript auch asynchron ist. Dies hat in meinem Fall das Problem verursacht.
Anders
207

Möglicherweise haben Sie Ihr Skript-Tag aufgerufen, bevor das jquery-Skript aufgerufen wird.

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

Dies führt dazu, dass $ nicht definiert ist

Setzen Sie die Datei jquery.js vor Ihr Skript-Tag und es wird funktionieren;) wie folgt:

<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>
Hanky ​​Panky
quelle
1
Dies ist eine großartige Antwort. Ich habe es versucht und es hat bei mir funktioniert. Ich verwende VS 2013 und ASP.net. Wissen Sie, wie ich Javascript laden kann, bevor die Seite automatisch in asp.net geladen wird, oder muss ich in all meinen Dateien auf diese Weise auf Javascript verweisen?
Pat
Um Ihre Antwort zu ergänzen. In ASP.net können Sie in Shared_Layout.cshtml `<head> </ head>`
Pat
@pat und stellen Sie sicher, dass Sie Ihren Code in ein @section ScriptsTag schreiben
Marc
Bitte aktualisieren Sie die Antwort, um HTTPS zu verwenden, und erwägen Sie die Verwendung von SPI devdocs.io/html/attributes#integrity-attribute
Josh Habdas
65

Zuerst müssen Sie sicherstellen, dass das jQuery-Skript geladen ist. Dies kann von einem CDN oder lokal auf Ihrer Website stammen. Wenn Sie dies nicht zuerst laden, bevor Sie versuchen, jQuery zu verwenden, wird Ihnen mitgeteilt, dass jQuery nicht definiert ist.

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

Dies kann sich im HEAD oder in der Fußzeile der Seite befinden. Stellen Sie einfach sicher, dass Sie es laden, bevor Sie versuchen, andere jQuery-Inhalte aufzurufen.

Dann müssen Sie eine der beiden folgenden Lösungen verwenden

(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); 

oder

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

Bitte beachten Sie, dass $ (document) .ready (function () {// code here}) oft; wird nicht funktionieren.

Andrew Killen
quelle
1
"jQuery ist nicht definiert". Es existiert jedoch nach dem Laden der Seite.
Paul Totzke
Ich bin mir nicht sicher, ob dies eine Frage oder eine Aussage ist, aber ich würde überprüfen, ob Sie das jQuery-Skript aufrufen, bevor Sie versuchen, es zu verwenden. Es hört sich so an, als würden Sie es in die Fußzeile laden und Dinge weiter oben auf der Seite aufrufen.
Andrew Killen
Entschuldigung, ich dachte, dies wäre eine Technik, mit der Sie die Skripte in beliebiger Reihenfolge verwenden können. Ja, ich habe dies im Body-Bereich im MVC-Stil verwendet. mycode.js, dann jQuery.js sind die letzten beiden Dinge auf der Seite.
Paul Totzke
Keine Sorge Paul, ich habe die Lösung so bearbeitet, dass sie "Sie müssen ... zuerst laden" enthält. :)
Andrew Killen
Behebt dies das Problem "Meine Skripte sind in der richtigen Reihenfolge, aber die Skripte werden in einer anderen Reihenfolge geladen". Ich erinnere mich, dass ich so etwas vor 4 Jahren gemacht habe, aber ich kann mich nicht erinnern, welches Problem es gelöst hat.
Paul Totzke
50

Wenn sich der Aufruf des jQuery-Plugins neben dem </body>befindet und Ihr Skript zuvor geladen wurde, sollten Sie Ihren Code nach dem window.onloadEreignis wie folgt ausführen lassen :

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

`

Daher wird Ihr Code erst nach dem Laden des Fensters ausgeführt, wenn alle Assets geladen wurden. In diesem Punkt wird jQuery ( $) definiert.

Wenn Sie das verwenden:

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

`

Das $ist zu diesem Zeitpunkt noch nicht definiert, da es aufgerufen wird, bevor die jQuery geladen wird, und Ihr Skript in dieser ersten Zeile auf der Konsole fehlschlägt.

Dandapereira
quelle
Im Allgemeinen ist es eine schlechte Idee, sich an window.unload zu binden. Es wird effektiv das einzige Event sein, das läuft !!!
Rudi Strydom
Hinweis: Denken Sie daran, dass Sie nur eine window.onload-Funktion zuweisen können. Wenn Sie ihr eine andere Funktion zuweisen, wird die vorherige nicht ausgeführt.
Bruno Peres
28

Ich habe einfach das Gleiche getan und festgestellt, dass ich eine Menge davon hatte

type="text/javacsript"

Also wurden sie geladen, aber kein weiterer Hinweis darauf, warum es nicht funktionierte. Unnötig zu erwähnen, dass die richtige Schreibweise das Problem behoben hat.

George R.
quelle
Anmerkung des Moderators : Der Tippfehler in diesem Beitrag ist absichtlich , um einen Punkt zu veranschaulichen. Bitte bearbeiten Sie den Beitrag nicht, um dies zu "korrigieren".
Martijn Pieters
23

Verwenden Sie einen Skriptabschnitt in der Ansicht und im Master-Layout.

Fügen Sie alle in Ihrer Ansicht definierten Skripte in einen Abschnitt "Skripte" der Ansicht ein. Auf diese Weise kann das Master-Layout dies laden, nachdem alle anderen Skripte geladen wurden. Dies ist die Standardeinstellung beim Starten eines neuen MVC5-Webprojekts. Ich bin mir bei früheren Versionen nicht sicher.

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

Beachten Sie, wie der Skripte Abschnitt zuletzt in der Master - Layout - Datei wiedergegeben wird.

eckig
quelle
2
Hinweis: Ansichtsabschnitte werden in Teilansichten von Entwurf nicht unterstützt.
Adam Naylor
Dies ist, was ich für mein Update tun musste ... und ich hätte es besser wissen sollen, die @Scripts zuerst zu verwenden, aber ich habe es vergessen, bis ich nach einem Fix gesucht habe.
Caverman
12

Stellen Sie sicher, dass Sie jquery wirklich laden. Dies ist keine jquery - es ist die Benutzeroberfläche!

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

Dies ist eine korrekte Skriptquelle für jquery:

 <script language="JavaScript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
Wolfgang Fahl
quelle
11

Wie oben erwähnt, geschieht dies aufgrund des Konflikts von $ variable.

Ich habe dieses Problem behoben, indem ich eine sekundäre Variable für jQuery ohne Konflikt reserviert habe.

var $j = jQuery.noConflict();

und dann überall verwenden

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

Weitere Details finden Sie hier

Naveed Abbas
quelle
8

Dies bedeutet, dass Ihre jQuery-Bibliothek noch nicht geladen wurde.

Sie können Ihren Code verschieben, nachdem Sie die jQuery-Bibliothek abgerufen haben.

oder Sie können so etwas verwenden

window.onload = function(){
  // Your code here
};  
Nesar
quelle
Dies wird ausgelöst, nachdem das DOM geladen wurde, jedoch nicht, wenn Steuerelemente, Javascript und andere im Hintergrund ausgeführte Programme geladen wurden. Damit dies funktioniert, müsste eine Zeitverzögerung verwendet werden.
Fandango68
5

Nach einigen Tests habe ich eine schnelle Lösung gefunden, die Sie oben auf Ihrer Indexseite hinzufügen können:

<script>
$=jQuery;
</script>

es funktioniert sehr gut :)

Mimouni
quelle
4
Die Frage war: $ ist nicht definiert, nein?
Mimouni
Nicht gefangener Referenzfehler: jQuery ist nicht definiert
Simon Schnell
Haben Sie es direkt unter den Import der jQuery-Bibliothek gestellt?
Mike Warren
4

Ich habe die gleiche Fehlermeldung erhalten, als ich die jQuery-Referenz falsch geschrieben und stattdessen type="text/javascript""... javascirpt" eingegeben habe. ;)

Alan
quelle
Eureka! Ich hatte meine als type="text/css". Danke, dass du meine geistige Gesundheit gerettet hast!
Jeriko
Ich habe gepatzt und hatte type="javascript". Verschwendete 30 Minuten, um es zu finden.
Maurer
4

Es hört sich so an, als würde jQuery nicht richtig geladen. Welche Quelle / Version verwenden Sie?

Alternativ kann es sich um eine Namespace-Kollision handeln. Versuchen Sie daher, jQuery explizit anstelle von zu verwenden $. Wenn dies funktioniert, möchten Sie möglicherweise noConflictsicherstellen, dass der andere verwendete Code $nicht beschädigt wird.

Alexender Dumma
quelle
3

Dieser Fehler bedeutet, dass jQuery noch nicht auf der Seite geladen wurde. Die Verwendung $(document).ready(...)oder eine andere Variante davon nützt nichts, ebenso $wie die jQuery-Funktion.

Die Verwendung window.onloadsollte hier funktionieren. Beachten Sie, dass nur eine Funktion zugewiesen werden kann window.onload. Um zu vermeiden, dass die ursprüngliche Onload-Logik verloren geht, können Sie die ursprüngliche Funktion folgendermaßen dekorieren:

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

Dadurch wird die ursprünglich zugewiesene Funktion ausgeführt window.onloadund anschließend ausgeführt // YOUR JQUERY.

Weitere Informationen zum Dekorationsmuster finden Sie unter https://en.wikipedia.org/wiki/Decorator_pattern .

Kyle McVay
quelle
2

Ich benutze Url.Content und habe nie ein Problem.

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

In der Lösung wird Folgendes erwähnt: "Als letztes müssen Sie sicherstellen, dass Sie keine Plugins laden, bevor Sie jQuery laden. Plugins erweitern das Objekt" $ ". Wenn Sie also ein Plugin laden, bevor Sie jQuery Core laden, müssen Sie dies tun Ich werde den von Ihnen beschriebenen Fehler erhalten. "

Um dies zu vermeiden -

Viele JavaScript-Bibliotheken verwenden $ als Funktions- oder Variablennamen, genau wie jQuery. In jQuerys Fall ist $ nur ein Alias ​​für jQuery, sodass alle Funktionen ohne Verwendung von $ verfügbar sind. Wenn wir neben jQuery eine andere JavaScript-Bibliothek verwenden müssen, können wir die Kontrolle über $ mit einem Aufruf von $ .noConflict () an die andere Bibliothek zurückgeben:


quelle
1

Ich hatte dieses Problem einmal ohne ersichtlichen Grund. Es passierte lokal, während ich den Aspnet-Entwicklungsserver durchlief. Es hatte funktioniert und ich habe alles in einen Zustand zurückversetzt, in dem es zuvor funktioniert hatte und es immer noch nicht funktioniert hat. Ich habe in den Chrome-Debugger geschaut und die jquery-1.7.1.min.js hatte ohne Probleme geladen. Es war alles sehr verwirrend. Ich weiß immer noch nicht, was das Problem war, aber ich schließe den Browser, schließe den Entwicklungsserver und versuche es dann erneut.

cedd
quelle
1

Platzieren Sie einfach die jquery-URL oben auf Ihrem jquery-Code

so was--

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

Ich hatte das gleiche Problem und das lag daran, dass mein Verweis auf jQuery.js nicht im Tag enthalten war. Nachdem ich das umgestellt hatte, fing alles an zu funktionieren.

Anthony

Anthony
quelle
1
  1. Überprüfen Sie, ob der genaue Pfad Ihrer JQuery-Datei enthalten ist.

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

Wenn Sie dies unten auf Ihrer Seite hinzufügen, rufen Sie bitte alle die JS-Funktion unterhalb dieser Deklaration auf.

  1. Überprüfen Sie mit diesem Code-Test,

    <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~!' );
    });

Frieden!

Daniel Adenew
quelle
0

Wir haben das gleiche Problem ... aber aus Versehen habe ich die Ordnereigenschaften überprüft und etwas festgelegt ...

Sie müssen die Eigenschaften aller Ordner überprüfen, auf die Sie zugreifen.

  1. Rechtsklick Ordner
  2. Registerkarte "Berechtigungen"
  3. Legen Sie den Ordnerzugriff fest: EIGENTÜMER: Dateien erstellen und löschen GRUPPE: Zugriff auf Dateien SONSTIGES: Zugriff auf Dateien

Ich hoffe, dass dies die Lösung ist ......

RoyS_philippines
quelle
0

Wenn Sie jQuery in asp.net verwenden und eine Masterseite verwenden und dort die jquery-Quelldatei laden, stellen Sie sicher, dass Sie den Header contentplaceholder nach allen jquery-Skriptreferenzen haben.

Ich hatte ein Problem, bei dem alle Seiten, die diese Masterseite verwendeten, "$ ist nicht definiert" zurückgaben, einfach weil die falsche Reihenfolge dazu führte, dass der clientseitige Code ausgeführt wurde, bevor das jquery-Objekt erstellt wurde. Stellen Sie also sicher, dass Sie:

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

Auf diese Weise wird der Code in der richtigen Reihenfolge ausgeführt und Sie können jQuery-Code auf den untergeordneten Seiten ausführen.

Francis Musignac
quelle
0

In meinem Fall habe ich auf von Google gehostete JQuery verwiesen. Es war richtig enthalten, aber ich war auf einer HTTPS-Seite und habe es über HTTP aufgerufen. Nachdem ich das Problem behoben (oder unsicheren Inhalt zugelassen) hatte, wurde es sofort ausgelöst.

Anthony
quelle
0

Ich hatte das gleiche Problem und konnte nicht herausfinden, was es verursachte. Ich habe kürzlich meine HTML-Dateien von Japanisch nach UTF-8 konvertiert, aber mit den Skriptdateien nichts gemacht. Irgendwie wurde jquery-1.10.2.min.js in diesem Prozess beschädigt (ich habe immer noch keine Ahnung wie). Das Ersetzen von jquery-1.10.2.min.js durch das Original hat das Problem behoben.

Gavin
quelle
0

Es scheint, dass das Firebug-Problem behoben ist, wenn Sie Ihre jquery.js-Dateien im selben Ordner oder in einigen Unterordnern finden, in denen sich Ihre HTML-Datei befindet. Wenn sich Ihr HTML-Code beispielsweise unter C: / folder1 / befindet, sollten sich Ihre JS-Dateien ebenfalls unter C: / folder1 / (oder C: / folder1 / folder2 usw.) befinden und im HTML-Dokument entsprechend adressiert sein. hoffe das hilft.

sc123
quelle
0

Ich habe das gleiche Problem und kein Fall löst mich das Problem. Das einzige, was für mich funktioniert, ist, dass es in die Site.master-Datei eingefügt wird, das nächste:

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

Mit src = "<% = ResolveUrl (" ") ... ist das Laden von jQuery in den Inhaltsseiten korrekt.

Amelian
quelle
0

Ich hatte ein sehr ähnliches Problem. In meiner C # MVC-Anwendung wurde JQuery nicht erkannt. Ich musste das @ Scripts.Render ("~ / bundles / jquery") vom Ende meiner _Layout.cshtml-Datei an den Kopf des Abschnitts verschieben. Stellen Sie außerdem sicher, dass Sie Jquery als Nuget-Paket gekauft haben, wenn Sie Visual Studio verwenden!

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

Es gibt eine Möglichkeit, Javascript automatisch zu laden, bevor der Rest des Codes ausgeführt wird.

Gehen Sie zu Views \ Shared_Layout.html und fügen Sie Folgendes hinzu

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

Wenn das scriptTag ein deferAttribut hat, wird der Fehler angezeigt

Nicht gefangener ReferenceError: $ ist nicht definiert

und muss das Attribut deferaus dem scriptTag entfernen

AbdulAhmad Matin
quelle
0

Dies ist das häufigste Problem, um dies zu beheben. Sie müssen einen Punkt überprüfen

  1. Haupt-JQuery-Bibliothek einschließen
  2. Überprüfen Sie das Cross-Browser-Problem
  3. Fügen Sie die Bibliothek oben im JQuery-Code hinzu
  4. Überprüfen Sie, ob CDNs blockiert sind.

Ausführliche Informationen finden Sie in diesem Blog. Klicken Sie hier

Anju Batta
quelle