TypeError: $ não é uma function ao chamar a function 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 }); 

Eu estou chamando este script de dentro do Painel do WordPress e estou carregando-o depois que o framework jQuery foi carregado.

Quando eu verifico a página no Firebug, continuo recebendo constantemente a mensagem de erro:

TypeError: $ não é uma function

$ (document) .ready (function () {

Devo talvez envolver o script nesta function:

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

Eu tive esse erro algumas vezes e não tenho certeza de como lidar com isso.

Qualquer ajuda seria muito apreciada.

   

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

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

    Se você precisar usar document.ready , você pode realmente passar $ para a chamada de function:

     jQuery(function ($) { ... 

    Isso deve corrigir:

     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 liberam o $ var para que ele não colida com outras bibliotecas. Isso faz todo o sentido, como o WordPress é usado para todos os tipos de sites, aplicativos e, claro, blogs.

    De sua documentação:

    A biblioteca jQuery incluída no WordPress é definida no modo noConflict () (veja 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 dentro do fechamento e use $ vez de jQuery

    Eu encontrei a solução acima em https://magento.stackexchange.com/questions/33348/uncaught-typeerror-undefined-is-not-a-function-when-using-a-jquery-plugin-in-ma

    … depois de procurar 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(); }); 

    Tente isto:

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

    Crédito para Ashwani Panwar e Cyssoo resposta: https://stackoverflow.com/a/29341144/3010027

    Você tem que passar $ em function ()

      

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

    Se você usar o encapsulamento do jQuery, não deve ajudar neste caso. Por favor, tente porque eu 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á atualmente definido.

    O que funcionou para mim. A primeira biblioteca a importar é a biblioteca de consulta e, em seguida, chama o método jQuery.noConflict ().

        
      (function ($) {
       "use strict";
    
       $ (function () {
    
         // Seu código aqui
    
       });
    
     } (jQuery));
    
      

    Agora use jq no lugar de jQuery

    Você se depara com esse problema quando o nome da sua function e um dos nomes de id no arquivo são os mesmos. apenas certifique-se de que todos os seus nomes de identificação no arquivo sejam exclusivos.

    Usar

     jQuery(document). 

    ao invés de

     $(document). 

    ou

    Dentro da function, $ aponta para jQuery como seria de esperar

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

    Além disso, eu acho a boa solução para usar o modo noConflict do jQuery.

     (function($){ $(document).ready(function(){ // write code here }); // or also you can write jquery code like this jQuery(document).ready(function(){ // write code here }); })(jQuery); 

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

    substitua $ sign com jQuery assim:

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