TypeError: $ não é uma função ao chamar a função jQuery

Eu tenho um script jQuery simples em um plugin do WordPress que está usando um wrapper jQuery como este:

$(document).ready(function(){

    // jQuery code is in here

});

Estou chamando esse script de dentro do Painel do WordPress e o carregando APÓS o carregamento da estrutura do jQuery.

Ao verificar a página no Firebug, recebo constantemente a mensagem de erro:

TypeError: $ não é uma função

$ (document) .ready (function () {

Talvez eu devesse quebrar o script nesta função:

(function($){

    // jQuery code is in here

})(jQuery);

Já tive esse erro algumas vezes e não sei como lidar com isso.

Qualquer ajuda seria muito apreciada.

Por padrão, quando você enfileira o jQuery no Wordpress, deve usar jQuerye $não é usado (isto é para compatibilidade com outras bibliotecas).

Sua solução de envolvê-lo functionfuncionará bem, ou você pode carregar o jQuery de outra maneira (mas isso provavelmente não é uma boa idéia no Wordpress).

Se você deve usar document.ready, você pode realmente passar $para a chamada de função:

jQuery(function ($) { ...

Isso deve corrigi-lo:

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

Simplificando, o WordPress executa seus próprios scripts antes que você possa, e eles lançam o $var para que não colidam com outras bibliotecas. Isso faz todo o sentido, pois o WordPress é usado para todos os tipos de sites, aplicativos e, claro, blogs.

Da documentação deles:

A biblioteca jQuery incluída no WordPress está definida no modo noConflict () (consulte wp-includes / js / jquery / jquery.js). Isso evita problemas de compatibilidade com outras bibliotecas JavaScript que o WordPress pode vincular.

No modo noConflict (), o atalho global $ para jQuery não está disponível ...

Esta solução funcionou para mim

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

Mova seu código para dentro do fechamento e use em $vez dejQuery

Encontrei a solução acima em /magento/33348/uncaught-typeerror-undefined-is-not-a-function-when-using-a-jquery-plugin-in-ma

... depois de pesquisar demais

Você pode evitar conflitos 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
});

Agradecemos a Ashwani Panwar e Cyssoo resposta: https://stackoverflow.com/a/29341144/3010027

Tente o seguinte:

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

Você precisa passar $ in function ()

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

// jQuery code is in here

});
</script>

substitua o $sinal jQuery por:

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

Verifique suas referências do jQuery. É possível que você o faça referência mais de uma vez ou esteja chamando sua função muito cedo (antes que o jQuery seja definido). Você pode tentar como mencionado nos meus comentários e colocar qualquer referência do jQuery na parte superior do seu arquivo (na cabeça) e ver se isso ajuda.

Se você usar o encapsulamento do jQuery, não deverá ajudar nesse caso. Por favor, tente porque acho que é mais bonito e mais óbvio, mas se o jQuery não estiver definido, você obterá os mesmos erros.

No final ... jQuery não está definido atualmente.

Além disso, acho a boa solução para usar o 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);

Encontrei esta solução a partir daqui. https://thecodingstuff.com/how-to-properly-use-jquery-noconflict-mode-in-wordpress/

Usar

jQuery(document).

ao invés de

$(document).

ou

Dentro da função, $ aponta para jQuery como você esperaria

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

O que funcionou para mim. A primeira biblioteca a importar é a biblioteca de consultas e, em seguida, chame o 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>

(function ($) {
  "use strict";

  $ (function () {

    // Seu código aqui

  });

} (jQuery));

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

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

agora use jq no lugar de jQuery

Você encontra esse problema quando o nome da sua função e um dos nomes de identificação no arquivo são iguais. apenas verifique se todos os seus nomes de identificação no arquivo são exclusivos.

Você pode usar

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

ou

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