TypeError: $ ist keine Funktion beim Aufrufen der jQuery-Funktion

214

Ich habe ein einfaches jQuery-Skript in einem WordPress-Plugin, das einen jQuery-Wrapper wie diesen verwendet:

$(document).ready(function(){

    // jQuery code is in here

});

Ich rufe dieses Skript aus dem WordPress-Dashboard auf und lade es, nachdem das jQuery-Framework geladen wurde.

Wenn ich die Seite in Firebug überprüfe, erhalte ich ständig die Fehlermeldung:

TypeError: $ ist keine Funktion

$ (Dokument) .ready (Funktion () {

Sollte ich das Skript vielleicht in diese Funktion einbinden:

(function($){

    // jQuery code is in here

})(jQuery);

Ich habe diesen Fehler einige Male gehabt und bin mir nicht sicher, wie ich damit umgehen soll.

Jede Hilfe wäre sehr dankbar.

Jason
quelle
3
Wenn Sie die $Konsole eingeben und die Eingabetaste drücken, was sehen Sie?
Zerkms
Wenn ich $ in console trenne, erhalte ich "undefined"
Jason

Antworten:

320

Wenn Sie jQuery in Wordpress in die Warteschlange stellen, müssen Sie dies standardmäßig verwenden jQueryund es $wird nicht verwendet (dies dient der Kompatibilität mit anderen Bibliotheken).

Ihre Lösung zum Einwickeln functionfunktioniert einwandfrei, oder Sie können jQuery auf andere Weise laden (aber das ist in Wordpress wahrscheinlich keine gute Idee).

Wenn Sie verwenden müssen document.ready, können Sie tatsächlich $in den Funktionsaufruf übergehen :

jQuery(function ($) { ...
Explosionspillen
quelle
Ich habe die zweite Version ausprobiert, aber es hat nicht funktioniert, die erste Version hat funktioniert, aber ich möchte nur sicherstellen, dass ich mich beim Aufrufen von jQuery nicht verdopple.
Jason
@ Jason du brauchst das nicht mal; genau das, was ich gepostet habe: jsfiddle.net/vcbYJ
Explosion Pills
Könnten Sie bitte diese Frage wordpress.stackexchange.com/questions/214858/…
Und wenn irgendein Selektor draußen ist jQuery(function ($) { ..., müssen Sie jQueryanstelle von$
Misha Rudrastyh
Dank bro. Schätzen Sie es
Desper
153

Dies sollte das Problem beheben:

jQuery(document).ready(function($){
  //you can now use $ as your jQuery object.
  var body = $( 'body' );
});

Einfach ausgedrückt, WordPress führt seine eigenen Skripte aus, bevor Sie können, und sie geben die $Variable frei, damit sie nicht mit anderen Bibliotheken kollidiert. Dies ist absolut sinnvoll, da WordPress für alle Arten von Websites, Apps und natürlich Blogs verwendet wird.

Aus ihrer Dokumentation:

Die in WordPress enthaltene jQuery-Bibliothek ist auf den Modus noConflict () eingestellt (siehe wp-include / js / jquery / jquery.js). Dies soll Kompatibilitätsprobleme mit anderen JavaScript-Bibliotheken verhindern, die WordPress verknüpfen kann.

Im Modus noConflict () ist die globale Verknüpfung $ für jQuery nicht verfügbar ...

Matthew Blancarte
quelle
28

Diese Lösung hat bei mir funktioniert

;(function($){
    // your code
})(jQuery);

Verschieben Sie Ihren Code in den Verschluss und verwenden Sie $stattdessenjQuery

Ich habe die obige Lösung in /magento/33348/uncaught-typeerror-undefined-is-not-a-function-when-using-a-jquery-plugin-in-ma gefunden

... nachdem ich zu viel gesucht habe

Bikram Shrestha
quelle
2
Fantastische Lösung. Der Hauptgrund, warum dies funktioniert, ist, dass ";" Schließt jede andere Instanz von jquery, die bereits aktiv ist, und deklariert gleichzeitig eine andere lokal neu. Wenn Sie nur wenige Sekunden Zeit haben, um ein Layout in der Produktion zu implementieren, oder wenn viele, viele WordPress-Plugins ausgeführt werden, kann dies großartig sein. Beachten Sie jedoch, dass Sie das Problem beheben müssen. Dies ist nur ein Pflaster. Wenn es sich jedoch um eine Infoseite handelt, ist dies in Ordnung.
Luis
@ Martin James Das funktioniert bei mir also eingeschlossen. Es kann oder kann nicht für andere arbeiten
Bikram Shrestha
19

Sie können Konflikte wie diese vermeiden

var jq=jQuery.noConflict();
jq(document).ready(function(){  
  alert("Hi this will not conflict now");
  jq('selector').show();
});
Ashwani Panwar
quelle
7
Oder $ = jQuery.noConflict ();
Cyssoo
13

Versuche dies:

<script language="JavaScript" type="text/javascript" src="jquery/jquery.js"></script>
<script>
    jQuery.noConflict();
    (function ($) {
        function readyFn() {
            // Set your code here!!
        }

        $(document).ready(readyFn); 
    })(jQuery);

</script>
Jose Carlos Ramos Carmenates
quelle
8

Sie müssen $ in function () übergeben

<script>
jQuery(document).ready(function($){

// jQuery code is in here

});
</script>
Jitendra Damor
quelle
3
Wie unterscheidet sich das von der oben gegebenen Antwort (von drei Jahren zuvor)?
Rnevius
8

Ersetzen Sie das $Zeichen jQuery wie folgt:

jQuery(function(){
//your code here
});
MaXee Khan
quelle
7

Überprüfen Sie Ihre jQuery-Referenzen. Es ist möglich, dass Sie entweder mehrmals darauf verweisen oder Ihre Funktion zu früh aufrufen (bevor jQuery definiert wird). Sie können versuchen, wie in meinen Kommentaren erwähnt, eine beliebige jQuery-Referenz oben in Ihre Datei (im Kopf) einfügen und prüfen, ob dies hilfreich ist.

Wenn Sie die Kapselung von jQuery verwenden, sollte dies in diesem Fall nicht helfen. Bitte versuchen Sie es, weil ich denke, dass es hübscher und offensichtlicher ist, aber wenn jQuery nicht definiert ist, werden Sie die gleichen Fehler erhalten.

Am Ende ... ist jQuery derzeit nicht definiert.

Raghul Manoharan
quelle
Ich denke, es ist eher so, als dass etwas versucht, auf JQuery zuzugreifen, bevor es definiert ist, was wiederum alles kaputt macht. Versuchen Sie, Ihre scriptVerweise JQuerynach oben zu verschieben, index.htmlund es wird wahrscheinlich funktionieren
Dan Moldovan,
Diese Antwort benötigt mehr Sichtbarkeit. Ja, die anderen sind gültig, wenn der Standard-Namespace mit einer Version von jQuery verwendet wird, die über ein anderes Plugin geladen wurde. Stellen Sie jedoch sicher, dass Sie jQuery nicht versehentlich (und möglicherweise unnötig) mehr als einmal laden.
Edkay
6

Außerdem finde ich die gute Lösung für den jQuery noConflict-Modus.

(function($){

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

  // or also you can write jquery code like this

  jQuery(document).ready(function(){
      // write code here
  });

})(jQuery);

Ich habe diese Lösung von hier aus gefunden. https://thecodingstuff.com/how-to-properly-use-jquery-noconflict-mode-in-wordpress/

Renish Khunt
quelle
5

Verwenden

jQuery(document).

anstatt

$(document).

oder

Innerhalb der Funktion zeigt $ wie erwartet auf jQuery

(function ($) {
   $(document).
}(jQuery));
Sanjay
quelle
4

Was hat bei mir funktioniert? Die erste Bibliothek, die importiert wird, ist die Abfragebibliothek. Rufen Sie anschließend die Methode jQuery.noConflict () auf.

<head>
 <script type="text/javascript" src="jquery.min.js"/>
 <script>
  var jq = jQuery.noConflict();
  jq(document).ready(function(){
  //.... your code here
    });
 </script>
PbxMan
quelle
4
(Funktion ($) {
  "benutze streng";

  $ (function () {

    // Dein Code hier

  });

} (jQuery));
Sharif Mohammad Eunus
quelle
3
<script>
var jq=jQuery.noConflict();
(function ($) 
    {
    function nameoffunction()
    {
        // Set your code here!!
    }

    $(document).ready(readyFn); 
    })(jQuery);

Verwenden Sie jetzt jq anstelle von jQuery

Aman birjpuriya
quelle
3

Dieses Problem tritt auf, wenn Ihr Funktionsname und einer der ID-Namen in der Datei identisch sind. Stellen Sie einfach sicher, dass alle Ihre ID-Namen in der Datei eindeutig sind.

Laxman Jaygonde
quelle
2

Sie können verwenden

jQuery(document).read(function(){ ... });

oder

(function ($) { ... }(jQuery));
Bhavesh Balar
quelle