jQuery Uncaught TypeError: la propiedad '$' del objeto [ventana del objeto] no es una función

92

Todo, descargué una aplicación de formulario JS / CSS preempaquetada y estoy tratando de usarla en Wordpress. Tengo el siguiente código:

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


});

Estaba asumiendo que Wordpress ningún conflicto estaba causando un problema, así que actualicé el último paréntesis para que se pareciera a lo siguiente:

}, "jQuery");

Sin embargo, sigo recibiendo el mismo error. ¿Alguien sabe qué estaría causando este problema y cómo resolverlo?

¡Gracias por adelantado!

usuario1048676
fuente

Respuestas:

260

Este es un problema de sintaxis, la biblioteca jQuery incluida con WordPress se carga en modo "sin conflicto". Esto es para evitar problemas de compatibilidad con otras bibliotecas de JavaScript que WordPress puede cargar. En el modo "no-confict", el atajo $ no está disponible y se usa el jQuery más largo, es decir

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

Al incluir $ entre paréntesis después de la llamada a la función, puede usar este atajo dentro del bloque de código.

Para obtener más detalles, consulte el Codex de WordPress

Monstruo De Ojos Rojos
fuente
Debo agregar que necesitas perder el "jQuery" al final
RedEyedMonster
3
¡Eres un SALVADOR DE VIDAS! Después de 3 días de depuración, descubrí que esta era la solución exacta para mi problema. Aunque WordPress estaba cargando el archivo jQuery, no pude acceder a las funciones mencionadas en el documento listo. Así que esta línea exacta de código, es decir, la jQuery(document).ready(function ($) {solucionó para siempre. Muchas gracias por compartir.
Devner
2
este es el mismo problema en Drupal también. La solución también funciona allí. Gracias
Yogesh Gupta
35

Mi construcción amigable sin conflictos favorita:

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

Llamar a jQuery con un puntero de función es un atajo para $ (documento) .ready (...)

O como decimos en coffeescript:

jQuery ($) ->
  # code here
Julian
fuente
Si $ya es una instancia de jquery, ¿hay alguna razón para pasar jQueryy darle el $nombre una vez más?
zerkms
2
$ puede no ser una instancia de jQuery si está en conflicto con otra biblioteca - modo sin conflicto.
Juliano
4
Es un atajo $(document).ready(), no$(document).on('load')
Kevin B
¡Esto funcionó para mí! Todas las funciones custom.js en mi tema se rompieron inexplicablemente. Reemplacé $ (document) .ready (function () {con esto y funcionó como magia :)
Ira Herman
6

En Wordpress simplemente reemplace

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

con

jQuery(function(){...});
Shashank Agarwal
fuente
1

Puede considerar reemplazar el script jQuery predeterminado de WordPress con la Biblioteca de Google agregando algo como lo siguiente en el archivo functions.php del tema:

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');

Código tomado de aquí: http://www.wpbeginner.com/wp-themes/replace-default-wordpress-jquery-script-with-google-library/

p.voinov
fuente
La mejor solución si está utilizando complementos de JQuery "externos" fuera de WP Downside: - Podría - entrar en conflicto con algunos complementos de Wordpress - no se notó nada por mi parte
RunsnbunsN
-1

tal vez tengas un código como este antes de jquery:

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

y ellos fue Conflicto

puedes cambiar $ a (jQuery)

S-kias
fuente
1
Lo usé como si el var $=jQuery.noConflict();mío fuera una configuración de java-webapp, ¡pero obtuve el mismo error!
coding_idiot