TypeError: 'undefined' ist keine Funktion (Auswertung von '$ (document)')

139
  1. Ich benutze eine WordPress-Site.
  2. Ich füge dieses Skript in den Header ein.

Wenn das Skript geladen wird, wird folgende Fehlermeldung angezeigt:

TypeError: 'undefined' ist keine Funktion (Auswertung von '$ (document)')

Ich habe keine Ahnung, was es verursacht oder was es überhaupt bedeutet.

In Firebug bekomme ich folgendes:

$ ist keine Funktion

dcolumbus
quelle
4
Stellen Sie sicher, dass Sie die jQuery-Bibliothek vor Ihrem benutzerdefinierten Skript einfügen und dass die NetRegisterkarte von Firebug keine Fehler enthält (stellen Sie sicher, dass jQuery tatsächlich geladen wird).
Wsanville
... ja, natürlich wird jQuery vorher geladen. Ich bin mir ziemlich sicher, dass es sich um ein WordPress-Enque-Problem handelt.
Columbus

Antworten:

239

Wordpress verwendet jQuery standardmäßig im noConflict- Modus. Sie müssen es jQueryals Variablennamen referenzieren , nicht $zB verwenden

jQuery(document);

anstatt

$(document);

Sie können dies einfach in eine selbstausführende Funktion $einbinden, die wieder auf jQuery verweist (und auch den globalen Namespace nicht verschmutzt), z

(function ($) {
   $(document);
}(jQuery));
El Yobo
quelle
5
Das Skript ist nicht erforderlich. Sie können einfach anrufen, jQuery(document)anstatt $(document)wo immer Sie wollen. Wenn Sie $stattdessen verwenden möchten , erstellt das obige Skript einfach eine Funktion, die ein Argument $akzeptiert und es dann weitergibt jQuery. Kurz gesagt, zeigt innerhalb der Funktion $wie erwartet auf jQuery.
El Yobo
2
Eigentlich habe ich mein normales $(document).ready(function() { // code });anstelle Ihres $(document);... platziert, das wie ein Zauber funktioniert hat.
Columbus
1
Ja, das habe ich vorgeschlagen - "Innerhalb der Funktion zeigt $ auf jQuery, wie Sie es erwarten würden".
El Yobo
Auf diese Weise sparen Sie ein paar Zeichen :) Weitere Details zur! Function () {} () - Form der selbstausführenden Anweisung .
El Yobo
Ich weiß, dass es alt ist @ElYobo, aber ich denke, Sie könnten Ihren Beitrag bearbeiten und Ihr Beispiel aus Ihrem ersten Kommentar als zweites Beispiel in die Antwort einfügen. Danke, dass du mir Zeit gespart hast =)
Manatax
25

Verwenden Sie jQuery's noConflict. Es hat Wunder für mich getan

var example=jQuery.noConflict();
example(function(){
example('div#rift_connect').click(function(){
    example('span#resultado').text("Hello, dude!");
    });
});

Angenommen, Sie haben jQuery in Ihr HTML aufgenommen

<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Leno Britto
quelle
15

Benutze das:

var $ =jQuery.noConflict();
Suman Biswas
quelle
11

Probieren Sie dieses Snippet aus:

jQuery(function($) {
  // Your code.
})

Es hat bei mir funktioniert, vielleicht hilft es Ihnen auch.

Gurpreet Dhanoa
quelle
11

Ich hatte dieses Problem nur auf Chrome.

Ich habe versucht hinzuzufügen

var $ =jQuery.noConflict();

kurz vor dem anruf

$(document).ready(function () {

Es funktionierte.

Vielen Dank

Le_Dhul
quelle
Danke für diesen einen. Ich wusste, dass ich das Problem mit "jQuery" anstelle von "$" lösen konnte, aber mein Problem war, dass es Komodo-Bearbeitung auslöst, wenn es auf diese Weise geschrieben wurde, sodass ich wählen musste, ob ich Code-Hinweise / Vervollständigungen für $ erhalten möchte oder ob mein JavaScript tatsächlich funktioniert. Diese Methode lässt mich beides haben.
George Kendros
6

Überprüfen Sie auch, ob jQuery enthalten ist, gefolgt von einigen Komponenten / anderen Bibliotheken (z. B. jQuery UI), und schließen Sie dann versehentlich jQuery erneut ein. Dadurch wird jQuery neu definiert und die Komponenten-Helfer (z. B. .datepicker) werden aus der Instanz entfernt.

agrath
quelle
4
 ;(function($){
        // your code
    })(jQuery);

Platzieren Sie Ihren js-Code oben im Verschluss, um das Problem zu lösen.

Bikram Shrestha
quelle
4

Ich würde das benutzen

(function ($) {
   $(document);
}(jQuery));
JoT
quelle
2

Ich habe auch viele Male mit solchen Problemen im Webentwicklungsträger konfrontiert. Eigentlich ist es kein JS-Konflikt. Wenn wir eine HTML-Website in den Browser laden, tritt kein solcher Fehler auf, aber wenn wir diese Art von Website über localhost laden, tritt ein solches Problem auf. Das liegt an localhost. Wenn wir Skripte über den lokalen Host laden, wird das Skript gescannt und die Ausgabe gerendert. Aber als wir localhost nicht benutzt haben. Es wird nur die Ausgabe gescannt. Beispiel: Wenn wir PHP-Code neben den lokalen Host schreiben und ohne Host ausführen, erhalten wir eine Fehlermeldung. Wenn der Code jedoch korrekt ist und über den Host ausgeführt wird, erhalten wir die tatsächliche Ausgabe. Wenn wir das Inspect-Element verwenden, erhalten wir den Ausgabecode im HTMl-Format, jedoch nicht im PHP-Format. Dies liegt am Rendern des Codes.

Dies ist ein Renderfehler. Um diesen JQuery-Code-Fehler zu beheben, verwendet eine der Lösungen möglicherweise diese Methode.

jQuery(document).ready(function($){
/******** Body of Jquery Code*****/
});

Dieser Code registriert '$' als Variable für die Funktion, indem jquery angewendet wird. Andernfalls wird die .js-Datei standardmäßig nur als Javascript gelesen.

Rajan Lama
quelle
1

Ich bin auch auf dieses Problem gestoßen, als ich jQuery in meinen Seitenkopf aufgenommen habe und nicht bemerkt habe, dass der Host es bereits automatisch in die Seite aufgenommen hat. Laden Sie also Ihre Seite live und überprüfen Sie die Quelle, um festzustellen, ob jQuery verlinkt ist.

FrostyL
quelle
1

Zwei Dinge:

  1. Stellen Sie sicher, dass Sie vor Ihrem $ (Dokument) eine jQuery-Bibliothek hinzugefügt haben.
  2. Dann ändern Sie einfach alle "$" mit: jQuery, wie in den vorherigen Kommentaren.
Jorge Alejandro Inturias
quelle
1

Wickeln Sie das gesamte Skript dazwischen ...

<script>
    $.noConflict();
    jQuery( document ).ready(function( $ ) {
      // Code that uses jQuery's $ can follow here.
    });
</script>

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 Sie neben jQuery eine andere JavaScript-Bibliothek verwenden müssen, geben Sie die Kontrolle über $ mit einem Aufruf von $ .noConflict () an die andere Bibliothek zurück . Alte Referenzen von $ werden während der jQuery-Initialisierung gespeichert. noConflict () stellt sie einfach wieder her.

Jitendra Damor
quelle
1

Sie können sowohl jQuery als auch $ in unter dem Snippet verwenden. es hat bei mir funktioniert

jQuery( document ).ready(function( $ ) {
  // jQuery(document)
  // $(document)
});
Kalpesh Prajapati
quelle
1

Sie können $ in function () übergeben

jQuery(document).ready(function($){

// jQuery code is in here

});

oder Sie können ersetzen $(document);mit dieserjQuery(document);

oder du kannst verwenden jQuery.noConflict()

var jq=jQuery.noConflict();
jq(document).ready(function(){  
  jq('selector').show();
});
Ganesh
quelle