jQuery Uncaught TypeError: La propriété '$' de l'objet [object Window] n'est pas une fonction

92

Tous, j'ai téléchargé une application de formulaire JS / CSS pré-groupée et j'essaye de l'utiliser dans Wordpress. J'ai le code suivant:

$(document).ready(function () {


/*----------------------------------------------------------------------*/
/* Parse the data from an data-attribute of DOM Elements
/*----------------------------------------------------------------------*/


$.parseData = function (data, returnArray) {
    if (/^\[(.*)\]$/.test(data)) { //array
        data = data.substr(1, data.length - 2).split(',');
    }
    if (returnArray && !$.isArray(data) && data != null) {
        data = Array(data);
    }
    return data;
};

/*----------------------------------------------------------------------*/
/* Image Preloader
/* http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript
/*----------------------------------------------------------------------*/



// Arguments are image paths relative to the current page.
$.preload = function() {
    var cache = [],
        args_len = arguments.length;
    for (var i = args_len; i--;) {
        var cacheImage = document.createElement('img');
        cacheImage.src = arguments[i];
        cache.push(cacheImage);
    }
};


/*----------------------------------------------------------------------*/
/* fadeInSlide by revaxarts.com
/* Fades out a box and slide it up before it will get removed
/*----------------------------------------------------------------------*/


$.fn.fadeInSlide = function (speed, callback) {
    if ($.isFunction(speed)) callback = speed;
    if (!speed) speed = 200;
    if (!callback) callback = function () {};
    this.each(function () {

        var $this = $(this);
        $this.fadeTo(speed / 2, 1).slideDown(speed / 2, function () {
            callback();
        });
    });
    return this;
};


/*----------------------------------------------------------------------*/
/* fadeOutSlide by revaxarts.com
/* Fades out a box and slide it up before it will get removed
/*----------------------------------------------------------------------*/


$.fn.fadeOutSlide = function (speed, callback) {
    if ($.isFunction(speed)) callback = speed;
    if (!speed) speed = 200;
    if (!callback) callback = function () {};
    this.each(function () {

        var $this = $(this);
        $this.fadeTo(speed / 2, 0).slideUp(speed / 2, function () {
            $this.remove();
            callback();
        });
    });
    return this;
};

/*----------------------------------------------------------------------*/
/* textFadeOut by revaxarts.com
/* Fades out a box and slide it up before it will get removed
/*----------------------------------------------------------------------*/


$.fn.textFadeOut = function (text, delay, callback) {
    if (!text) return false;
    if ($.isFunction(delay)) callback = delay;
    if (!delay) delay = 2000;
    if (!callback) callback = function () {};
    this.each(function () {

        var $this = $(this);
        $this.stop().text(text).show().delay(delay).fadeOut(1000,function(){
            $this.text('').show();
            callback();
        })
    });
    return this;
};

/*----------------------------------------------------------------------*/
/* leadingZero by revaxarts.com
/* adds a leding zero if necessary
/*----------------------------------------------------------------------*/


$.leadingZero = function (value) {
    value = parseInt(value, 10);
    if(!isNaN(value)) {
        (value < 10) ? value = '0' + value : value;
    }
    return value;
};


});

Je supposais que Wordpress aucun conflit ne causait un problème, j'ai donc mis à jour la toute dernière parenthèse pour qu'elle ressemble à ce qui suit:

}, "jQuery");

Cependant, j'obtiens toujours la même erreur. Quelqu'un sait-il ce qui pourrait causer ce problème et comment le résoudre?

Merci d'avance!

utilisateur1048676
la source

Réponses:

260

C'est un problème de syntaxe, la bibliothèque jQuery incluse avec WordPress se charge en mode "sans conflit". Ceci afin d'éviter les problèmes de compatibilité avec d'autres bibliothèques javascript que WordPress peut charger. En mode "no-confict", le raccourci $ n'est pas disponible et le jQuery plus long est utilisé, ie

jQuery(document).ready(function ($) {

En incluant le $ entre parenthèses après l'appel de fonction, vous pouvez ensuite utiliser ce raccourci dans le bloc de code.

Pour plus de détails, voir WordPress Codex

RedEyedMonster
la source
Je devrais ajouter que vous devez perdre le "jQuery" à la fin
RedEyedMonster
3
Vous êtes un tel SAUVEUR DE VIE !!! Après 3 jours de débogage, j'ai trouvé que c'était la solution exacte à mon problème. Bien que WordPress chargeait le fichier jQuery, je ne pouvais pas accéder aux fonctions mentionnées dans le document prêt. Donc, cette ligne de code exacte, c'est- jQuery(document).ready(function ($) {à- dire l'a corrigé pour de bon. Merci beaucoup pour le partage.
Devner
2
c'est le même problème dans Drupal également. La solution fonctionne là aussi. Merci
Yogesh Gupta
35

Ma construction préférée sans conflit:

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

L'appel de jQuery avec un pointeur de fonction est un raccourci pour $ (document) .ready (...)

Ou comme on dit dans coffeescript:

jQuery ($) ->
  # code here
julien
la source
Si $est déjà une instance jquery - une raison de passer jQueryet de lui redonner le $nom?
zerkms
2
$ peut ne pas être une instance jQuery si elle est en conflit avec une autre bibliothèque - mode sans conflit.
Julian
4
C'est un raccourci vers $(document).ready(), pas$(document).on('load')
Kevin B
Cela a fonctionné pour moi! Toutes les fonctions custom.js de mon thème se sont rompues de manière inexplicable. J'ai remplacé le $ (document) .ready (function () {par ceci et cela a fonctionné comme par magie :)
Ira Herman
6

Dans Wordpress, remplacez simplement

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

avec

jQuery(function(){...});
Shashank Agarwal
la source
1

Vous pouvez envisager de remplacer le script jQuery WordPress par défaut par la bibliothèque Google en ajoutant quelque chose comme ce qui suit dans le fichier theme functions.php:

function modify_jquery() {
    if (!is_admin()) {
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', false, '1.10.2');
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'modify_jquery');

Code extrait d'ici: http://www.wpbeginner.com/wp-themes/replace-default-wordpress-jquery-script-with-google-library/

p.voinov
la source
Meilleure solution si vous utilisez des plugins JQuery "externes" en dehors de WP Inconvénient: - Pourrait - entrer en conflit avec certains plugins Wordpress - rien de remarqué de mon côté
RunsnbunsN
-1

peut-être avez-vous un code comme celui-ci avant la jquery:

var $jq=jQuery.noConflict();
$jq('ul.menu').lavaLamp({
    fx: "backout", 
    speed: 700
});

et eux était un conflit

vous pouvez changer $ en (jQuery)

S-kias
la source
1
Je l'ai utilisé comme si le var $=jQuery.noConflict();mien était une configuration java-webapp, mais j'ai eu la même erreur!
coding_idiot