TypeError: $ no es una función cuando se llama a la función jQuery


214

Tengo un script jQuery simple en un complemento de WordPress que usa un contenedor jQuery como este:

$(document).ready(function(){

    // jQuery code is in here

});

Llamo a este script desde el Panel de WordPress y lo estoy cargando DESPUÉS de que se haya cargado el marco jQuery.

Cuando reviso la página en Firebug constantemente recibo el mensaje de error:

TypeError: $ no es una función

$ (documento) .ready (función () {

¿Debería quizás envolver el script en esta función:

(function($){

    // jQuery code is in here

})(jQuery);

He tenido este error varias veces y no estoy seguro de cómo manejarlo.

Cualquier ayuda sería muy apreciada.


3
Si escribe $en la consola y presiona enter, ¿qué ve?
zerkms

Cuando ejecuto $ en la consola, recibo "indefinido"
Jason

Respuestas:


320

Por defecto, cuando pone en cola jQuery en Wordpress, debe usar jQuery, y $no se usa (esto es para compatibilidad con otras bibliotecas).

Su solución de envolverlo functionfuncionará bien, o puede cargar jQuery de otra manera (pero eso probablemente no sea una buena idea en Wordpress).

Si debe usar document.ready, puede pasar $a la llamada de función:

jQuery(function ($) { ...

Probé la segunda versión, sin embargo, no funcionó, la primera versión funcionó, pero solo quiero asegurarme de no duplicar la llamada a jQuery.
Jason

@ Jason ni siquiera necesitas eso; exactamente lo que publiqué
Explosion Pills el


Y si algún selector está afuera jQuery(function ($) { ..., debe usarlo en jQuerylugar de$
Misha Rudrastyh

Gracias hermano. Lo aprecio
Desper

154

Esto debería solucionarlo:

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

En pocas palabras, WordPress ejecuta sus propios scripts antes de que pueda y liberan la $var para que no choque con otras bibliotecas. Esto tiene mucho sentido, ya que WordPress se usa para todo tipo de sitios web, aplicaciones y, por supuesto, blogs.

De su documentación:

La biblioteca jQuery incluida con WordPress está configurada en el modo noConflict () (consulte wp-includes / js / jquery / jquery.js). Esto es para evitar problemas de compatibilidad con otras bibliotecas de JavaScript que WordPress puede vincular.

En el modo noConflict (), el acceso directo global $ para jQuery no está disponible ...


28

Esta solución me funcionó

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

Mueva su código dentro del cierre y use en $lugar dejQuery

Encontré la solución anterior en /magento/33348/uncaught-typeerror-undefined-is-not-a-function-when-using-a-jquery-plugin-in-ma

... después de buscar demasiado


2
Fantástica solución. La razón principal por la que esto funciona es porque eso ";" cierra cualquier otra instancia de jquery que ya esté activa y al mismo tiempo declara otra nueva localmente. Cuando tiene solo unos segundos para implementar un diseño en producción o montones y montones de complementos de WordPress en ejecución, esto puede ser excelente. Pero, tenga en cuenta que debe solucionar el problema, esto es solo una curita, pero si es una página de información está bien.
luis

@ Martha James Esto funciona para mí, así que lo incluí. Puede o no funcionar para otros
Bikram Shrestha

19

Puedes evitar conflictos como este

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

77
O $ = jQuery.noConflict ();
Cyssoo


13

Prueba esto:

<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>

8

Tienes que pasar $ en la función ()

<script>
jQuery(document).ready(function($){

// jQuery code is in here

});
</script>

3
¿Cómo es esto diferente de la respuesta dada anteriormente (de tres años antes)?
rnevius

8

Reemplace el $signo con jQuery este:

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

7

Verifique sus referencias de jQuery. Es posible que esté haciendo referencia a ella más de una vez o que llame a su función demasiado pronto (antes de que se defina jQuery). Puede intentar como se menciona en mis comentarios y poner cualquier referencia de jQuery en la parte superior de su archivo (en la cabeza) y ver si eso ayuda.

Si usa la encapsulación de jQuery, no debería ayudar en este caso. Inténtalo porque creo que es más bonito y más obvio, pero si jQuery no está definido, obtendrás los mismos errores.

Al final ... jQuery no está definido actualmente.


Creo que es más que algo intenta acceder a JQuery antes de que se defina, lo que a su vez lo rompe todo. Intenta mover tus scriptreferencias JQuerya la parte superior de tu index.htmly probablemente funcionará
Dan Moldovan

Esta respuesta necesita más visibilidad. Sí, los otros son válidos si el espacio de nombres estándar se toma con una versión de jQuery cargada a través de algún otro complemento. Pero compruebe que no está cargando inadvertidamente (y posiblemente innecesariamente) jQuery más de una vez.
edkay


5

Utilizar

jQuery(document).

en vez de

$(document).

o

Dentro de la función, $ apunta a jQuery como era de esperar

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

4

Lo que funcionó para mí. La primera biblioteca que se importa es la biblioteca de consulta y luego llama al método jQuery.noConflict ().

<head>
 <script type="text/javascript" src="jquery.min.js"/>
 <script>
  var jq = jQuery.noConflict();
  jq(document).ready(function(){
  //.... your code here
    });
 </script>


3
<script>
var jq=jQuery.noConflict();
(function ($) 
    {
    function nameoffunction()
    {
        // Set your code here!!
    }

    $(document).ready(readyFn); 
    })(jQuery);

ahora use jq en lugar de jQuery


3

Te encuentras con este problema cuando el nombre de tu función y uno de los nombres de identificación en el archivo son los mismos. solo asegúrese de que todos sus nombres de identificación en el archivo sean únicos.


2

Puedes usar

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

o

(function ($) { ... }(jQuery));
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.