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

J’ai un script jQuery simple dans un plugin WordPress qui utilise un wrapper jQuery comme celui-ci:

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

J’appelle ce script depuis le tableau de bord WordPress et je le charge après que le framework jQuery a été chargé.

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

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 le gérer.

Toute aide serait grandement appréciée.

Par défaut, lorsque vous mettez en queue jQuery dans WordPress, vous devez utiliser jQuery et $ n’est pas utilisé (c’est pour la compatibilité avec d’autres bibliothèques).

Votre solution pour le faire function fonctionnera correctement, ou vous pouvez charger jQuery autrement (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 réparer:

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

En d’autres termes, WordPress exécute ses propres scripts avant de pouvoir les publier. Il libère donc $ var pour éviter toute 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 fournie avec WordPress est définie sur le mode noConflict () (voir wp-includes / js / jquery / jquery.js). Cela permet d’éviter les problèmes de compatibilité avec d’autres bibliothèques JavaScript que WordPress peut associer.

Dans le 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 dans la fermeture et utilisez $ au lieu de jQuery

J’ai trouvé la solution ci-dessus dans https://magento.stackexchange.com/questions/33348/uncaught-typeerror-undefined-is-not-a-function-when-using-a-jquery-plugin-in-ma

… après avoir trop cherché

Vous pouvez éviter un conflit comme celui-ci

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

Essaye ça:

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

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

Vous devez passer $ dans la fonction ()

  

Vérifiez vos références jQuery. Il est possible que vous le référeniez plus d’une fois ou que vous appeliez votre fonction trop tôt (avant la définition de jQuery). 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 vous aider. S’il vous plaît essayez-le parce que 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 défini actuellement.

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

    
  (fonction ($) {
   "use ssortingct";

   $ (fonction () {

     // Votre code ici

   })

 } (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’identifiant du fichier sont identiques. assurez-vous simplement que tous vos noms d’identifiant dans le fichier sont uniques.

Utilisation

 jQuery(document). 

au lieu de

 $(document). 

ou

Dans la fonction, $ pointe vers jQuery comme prévu

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

En outre, 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/

remplacez $ sign par jQuery comme ceci:

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