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!

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


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

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


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/


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)


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
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.