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

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.

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 ($) { ...

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

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

Puedes evitar conflictos como este

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

var $=jQuery.noConflict();

$(document).ready(function(){
    // jQuery code is in here
});

Gracias a Ashwani Panwar y Cyssoo: https://stackoverflow.com/a/29341144/3010027

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>

Tienes que pasar $ en la función ()

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

// jQuery code is in here

});
</script>

Reemplace el $signo con jQuery este:

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

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.

Además, encuentro la buena solución para usar el modo jQuery noConflict.

(function($){

  $(document).ready(function(){
      // write code here
  });

  // or also you can write jquery code like this

  jQuery(document).ready(function(){
      // write code here
  });

})(jQuery);

Encontré esta solución desde aquí. https://thecodingstuff.com/how-to-properly-use-jquery-noconflict-mode-in-wordpress/

Utilizar

jQuery(document).

en vez de

$(document).

o

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

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

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>

(función ($) {
  "uso estricto";

  $ (function () {

    // Tu código aquí

  });

} (jQuery));

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

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

ahora use jq en lugar de jQuery

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.

Puedes usar

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

o

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