TypeError: 'undefined' no es una función (evaluar '$ (documento)')

139
  1. Estoy usando un sitio de WordPress.
  2. Estoy incluyendo este script en el encabezado.

Cuando se carga el script, aparece este error:

TypeError: 'undefined' no es una función (evaluar '$ (documento)')

No tengo idea de qué lo está causando o qué significa.

En firebug, obtengo esto:

$ no es una función

dcolumbus
fuente
44
Asegúrese de incluir la biblioteca jQuery antes de su script personalizado, y de que no haya errores en la Netpestaña de Firebug (asegúrese de que jQuery se cargue realmente).
wsanville el
... sí, por supuesto, jQuery se está cargando de antemano. Estoy bastante seguro de que es un problema de WordPress enque.
dcolumbus el

Respuestas:

239

Wordpress usa jQuery en modo noConflict por defecto. Debe hacer referencia a él usando jQueryel nombre de la variable, no $, por ejemplo, usar

jQuery(document);

en vez de

$(document);

Puede resumir esto fácilmente en una función de ejecución automática para que $vuelva a referirse a jQuery (y también evite contaminar el espacio de nombres global), por ejemplo

(function ($) {
   $(document);
}(jQuery));
El Yobo
fuente
55
El guión no es necesario; puedes llamar en jQuery(document)lugar de $(document)donde quieras. Si desea utilizar $en su lugar, entonces el script anterior simplemente crea una función que toma un argumento y $luego lo ejecuta pasando jQuery; en resumen, dentro de la función, $apunta a jQuery como era de esperar.
El Yobo
2
En realidad, lo que hice fue colocar mi normalidad $(document).ready(function() { // code });en lugar de tu $(document);... eso funcionó a las mil maravillas.
dcolumbus el
1
Sí, eso es lo que sugería: "dentro de la función, $ apunta a jQuery como era de esperar".
El Yobo
Bueno, te ahorra un par de caracteres de esa manera :) Más detalles sobre la forma! Function () {} () de declaración de ejecución automática .
El Yobo
Sé que es viejo @ElYobo, pero creo que podría editar su publicación y agregar su ejemplo de su primer comentario en la respuesta como un segundo ejemplo. Gracias por
ahorrarme
25

Use jQuery's noConflict. Me hizo maravillas

var example=jQuery.noConflict();
example(function(){
example('div#rift_connect').click(function(){
    example('span#resultado').text("Hello, dude!");
    });
});

Es decir, suponiendo que haya incluido jQuery en su HTML

<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Leno Britto
fuente
15

Utilizar este:

var $ =jQuery.noConflict();
Suman Biswas
fuente
11

Prueba este fragmento:

jQuery(function($) {
  // Your code.
})

A mí me funcionó, quizás también te ayude.

Gurpreet Dhanoa
fuente
11

Tuve este problema solo en Chrome.

Traté de agregar

var $ =jQuery.noConflict();

justo antes de llamar

$(document).ready(function () {

Funcionó.

Muchas gracias

Le_Dhul
fuente
Gracias por este Sabía que podía resolver el problema usando "jQuery" en lugar de "$", pero mi problema fue que activa la edición de Komodo cuando se escribe de esa manera, así que tuve que elegir entre obtener sugerencias de código / completar en $ o hacer que mi JavaScript realmente funcione. Este método me permitió tener ambas.
George Kendros
6

También verifique la inclusión de jQuery, seguido de algunos componentes / otras bibliotecas (como jQuery UI) y luego incluya jQuery de forma accidental nuevamente; esto redefinirá jQuery y eliminará los ayudantes de componentes (como .datepicker) de la instancia.

agrath
fuente
4
 ;(function($){
        // your code
    })(jQuery);

Coloque su código js dentro del cierre de arriba, debería resolver el problema.

Bikram Shrestha
fuente
4

Yo usaria esto

(function ($) {
   $(document);
}(jQuery));
Jota
fuente
2

También me he enfrentado a estos problemas muchas veces en el operador de desarrollo web. En realidad, no es un conflicto de JS, cuando cargamos el sitio web html en el navegador no nos enfrentamos a ese error, pero cuando cargamos este tipo de sitio web a través de localhost nos enfrentamos a tal problema. Eso es por localhost. Cuando cargamos scripts a través del localhost, escanea el script y presenta el resultado. Pero cuando no usamos localhost. Simplemente escanea la salida. Ejemplo, cuando escribimos el código php, colocamos el host local y ejecutamos sin host, obtenemos un error. Pero si el código es correcto y se ejecuta a través del host, obtenemos una salida real, y cuando usamos el elemento de inspección obtenemos el código de salida en formato HTMl pero no en formato PHP, esto se debe a la representación del código.

Este es un error de representación. Entonces, para corregir este error de código jquery, una de las soluciones puede estar usando este método.

jQuery(document).ready(function($){
/******** Body of Jquery Code*****/
});

Lo que hace este código es registrar '$' como la variable de la función aplicando jquery. De lo contrario, el archivo .js solo se lee como javascript.

Rajan Lama
fuente
1

Me encontré con este problema también al incluir jQuery en el encabezado de mi página, sin darme cuenta de que el host ya lo estaba incluyendo en la página automáticamente. Así que cargue su página en vivo y verifique la fuente para ver si jQuery está siendo vinculado.

FrostyL
fuente
1

Dos cosas:

  1. Asegúrese de tener la biblioteca jQuery agregada, antes de su $ (documento).
  2. Luego simplemente cambie todo "$" con: jQuery, como los comentarios anteriores.
Jorge Alejandro Inturias
fuente
1

envolver todo el guión entre esto ...

<script>
    $.noConflict();
    jQuery( document ).ready(function( $ ) {
      // Code that uses jQuery's $ can follow here.
    });
</script>

Muchas bibliotecas de JavaScript usan $ como función o nombre de variable, tal como lo hace jQuery. En el caso de jQuery, $ es solo un alias para jQuery, por lo que toda la funcionalidad está disponible sin usar $. Si necesita usar otra biblioteca de JavaScript junto con jQuery, devuelva el control de $ a la otra biblioteca con una llamada a $ .noConflict () . Las referencias antiguas de $ se guardan durante la inicialización de jQuery; noConflict () simplemente los restaura.

Jitendra Damor
fuente
1

Puede usar jQuery y $ en el fragmento a continuación. funciono para mi

jQuery( document ).ready(function( $ ) {
  // jQuery(document)
  // $(document)
});
Kalpesh Prajapati
fuente
1

Puede pasar $ en la función ()

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

// jQuery code is in here

});

o puedes reemplazar $(document);con estojQuery(document);

o puedes usar jQuery.noConflict()

var jq=jQuery.noConflict();
jq(document).ready(function(){  
  jq('selector').show();
});
Ganesh
fuente