TypeError: $ n'est pas une fonction lors de l'appel de la fonction jQuery


214

J'ai un simple script jQuery dans un plugin WordPress qui utilise un wrapper jQuery comme ceci:

$(document).ready(function(){

    // jQuery code is in here

});

J'appelle ce script à partir du tableau de bord WordPress et le charge après le chargement du framework jQuery.

Lorsque je vérifie la page dans Firebug, je reçois constamment le message d'erreur:

TypeError: $ n'est pas une fonction

$ (document) .ready (function () {

Dois-je peut-être envelopper le script dans cette fonction:

(function($){

    // jQuery code is in here

})(jQuery);

J'ai eu cette erreur plusieurs fois et je ne sais pas comment la gérer.

Toute aide serait grandement appréciée.


3
Si vous tapez $dans la console et appuyez sur Entrée - que voyez-vous?
zerkms

Lors de l'exécution de $ dans la console, je reçois "undefined"
Jason

Réponses:


321

Par défaut, lorsque vous mettez en file d'attente jQuery dans Wordpress, vous devez utiliser jQueryet $n'est pas utilisé (c'est pour la compatibilité avec d'autres bibliothèques).

Votre solution pour l'envelopper functionfonctionnera bien, ou vous pouvez charger jQuery d'une autre manière (mais ce n'est probablement pas une bonne idée dans Wordpress).

Si vous devez utiliser document.ready, vous pouvez réellement passer $à l'appel de fonction:

jQuery(function ($) { ...

J'ai essayé la deuxième version mais cela n'a pas fonctionné, la première version l'a fait mais je veux juste m'assurer de ne pas doubler en appelant jQuery.
Jason

@Jason, vous n'en avez même pas besoin; exactement ce que j'ai publié: jsfiddle.net/vcbYJ
Explosion Pills

Pourriez-vous s'il vous plaît voir cette question wordpress.stackexchange.com/questions/214858/…

Et si un sélecteur est à l'extérieur jQuery(function ($) { ..., vous devez utiliser à la jQueryplace de$
Misha Rudrastyh

Merci mec. Appréciez-le
Desper

154

Cela devrait le corriger:

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

En termes simples, WordPress exécute ses propres scripts avant que vous ne puissiez le faire et ils libèrent la $var pour ne pas entrer en collision avec d'autres bibliothèques. Cela est tout à fait logique, car WordPress est utilisé pour toutes sortes de sites Web, d'applications et, bien sûr, de blogs.

De leur documentation:

La bibliothèque jQuery incluse avec WordPress est définie sur le mode noConflict () (voir wp-includes / js / jquery / jquery.js). C'est pour éviter les problèmes de compatibilité avec d'autres bibliothèques JavaScript que WordPress peut lier.

En mode noConflict (), le raccourci $ global pour jQuery n'est pas disponible ...


28

Cette solution a fonctionné pour moi

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

Déplacez votre code à l'intérieur de la fermeture et utilisez $au lieu dejQuery

J'ai trouvé la solution ci-dessus dans /magento/33348/uncaught-typeerror-undefined-is-not-a-function-when-using-a-jquery-plugin-in-ma

... après avoir trop cherché


2
Une solution fantastique. La principale raison pour laquelle cela fonctionne est que ";" ferme toute autre instance de jquery déjà active et en même temps en déclare une autre localement. Lorsque vous n'avez que quelques secondes pour implémenter une mise en page en production ou beaucoup et beaucoup de plugins wordpress en cours d'exécution, cela peut être très utile. Mais sachez que vous devez résoudre le problème, ce n'est qu'un pansement, mais s'il s'agit d'une page d'informations, c'est OK.
luis

@Martha James Cela fonctionne pour moi, donc je l'ai inclus. Cela peut ou peut ne pas fonctionner pour les autres
Bikram Shrestha

19

Vous pouvez éviter les conflits comme celui-ci

var jq=jQuery.noConflict();
jq(document).ready(function(){  
  alert("Hi this will not conflict now");
  jq('selector').show();
});

7
Ou $ = jQuery.noConflict ();
Cyssoo


13

Essaye ça:

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

8

Vous devez passer $ dans la fonction ()

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

// jQuery code is in here

});
</script>

3
En quoi est-ce différent de la réponse donnée ci-dessus (depuis trois ans auparavant)?
rnevius

8

remplacer le $signe par jQuery comme ceci:

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

7

Vérifiez vos références jQuery. Il est possible que vous la référençiez plus d'une fois ou que vous appeliez votre fonction trop tôt (avant que jQuery ne soit défini). Vous pouvez essayer comme mentionné dans mes commentaires et mettre n'importe quelle référence jQuery en haut de votre fichier (dans la tête) et voir si cela aide.

Si vous utilisez l'encapsulation de jQuery, cela ne devrait pas aider dans ce cas. Veuillez l'essayer car je pense que c'est plus joli et plus évident, mais si jQuery n'est pas défini, vous obtiendrez les mêmes erreurs.

Au final ... jQuery n'est pas actuellement défini.


Je pense que c'est plutôt que quelque chose essaie d'accéder à JQuery avant qu'il ne soit défini, ce qui à son tour casse tout. Essayez de déplacer vos scriptréférences JQueryvers le haut de votre index.htmlet cela fonctionnera probablement
Dan Moldovan

Cette réponse a besoin de plus de visibilité. Oui, les autres sont valides si l'espace de noms standard est pris avec une version de jQuery chargée via un autre plugin. Mais vérifiez que vous ne chargez pas par inadvertance (et éventuellement inutilement) jQuery plus d'une fois.
edkay


5

Utilisation

jQuery(document).

au lieu de

$(document).

ou

Dans la fonction, $ pointe vers jQuery comme vous vous en doutez

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

4

Ce qui a fonctionné pour moi. La première bibliothèque à importer est la bibliothèque de requêtes, puis à droite appelez la méthode jQuery.noConflict ().

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


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

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

maintenant utiliser jq à la place de jQuery


3

Vous rencontrez ce problème lorsque le nom de votre fonction et l'un des noms d'ID du fichier sont identiques. assurez-vous simplement que tous vos noms d'ID dans le fichier sont uniques.


2

Vous pouvez utiliser

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

ou

(function ($) { ... }(jQuery));
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.