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

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.

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 ($) { ...

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

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é

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

var $=jQuery.noConflict();

$(document).ready(function(){
    // jQuery code is in here
});

Nous remercions Ashwani Panwar et Cyssoo pour leur réponse: https://stackoverflow.com/a/29341144/3010027

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>

Vous devez passer $ dans la fonction ()

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

// jQuery code is in here

});
</script>

remplacer le $signe par jQuery comme ceci:

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

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.

Aussi, je trouve la bonne solution pour utiliser le mode jQuery noConflict.

(function($){

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

  // or also you can write jquery code like this

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

})(jQuery);

J'ai trouvé cette solution d'ici. https://thecodingstuff.com/how-to-properly-use-jquery-noconflict-mode-in-wordpress/

Utilisation

jQuery(document).

au lieu de

$(document).

ou

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

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

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>

(fonction ($) {
  "utiliser strict";

  $ (fonction () {

    // Votre code ici

  });

} (jQuery));

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

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

maintenant utiliser jq à la place de jQuery

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.

Vous pouvez utiliser

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

ou

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