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 WordPress Dashboard et je 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 suivant:
TypeError: $ n'est pas une fonction
$ (document) .ready (fonction () {
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 trop 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 jQuery, et $ n'est pas utilisé (pour des raisons de compatibilité avec d'autres bibliothèques).
Votre solution consistant à envelopper dans function fonctionnera 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 $ dans l'appel de fonction:
jQuery(function ($) { ...
Cela devrait résoudre le problème:
jQuery(document).ready(function($){
//you can now use $ as your jQuery object.
var body = $( 'body' );
});
En termes simples, WordPress exécute son propre script avant que vous puissiez le faire et libère le $ var afin qu'il ne se heurte pas à d'autres bibliothèques. Cela est tout à fait logique, car WordPress est utilisé pour tous les types 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). Ceci afin d'éviter des 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 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();
});
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 $ in function ()
<script>
jQuery(document).ready(function($){
// jQuery code is in here
});
</script>
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 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 vous aide.
Si vous utilisez l'encapsulation de jQuery, cela ne devrait pas vous aider dans ce cas. 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.
En fin de compte ... jQuery n'est pas actuellement défini.
remplacez le signe $ par jQuery comme ceci:
jQuery(function(){
//your code here
});
De plus, 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/
(fonction ($) {
"utiliser strict";
$ (fonction () {
// Votre code ici
});
} (jQuery));
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 ().
<head>
<script type="text/javascript" src="jquery.min.js"/>
<script>
var jq = jQuery.noConflict();
jq(document).ready(function(){
//.... your code here
});
</script>
<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 votre nom de 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
Au sein de la fonction, $ pointe sur jQuery comme prévu
(function ($) {
$(document).
}(jQuery));
Vous pouvez utiliser
jQuery(document).read(function(){ ... });
ou
(function ($) { ... }(jQuery));