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


214

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.


3
Se você digitar $no console e pressionar enter - o que você vê?
Zerkms 09/09

Ao executar $ na consola recebo "indefinido"
Jason

Respostas:


320

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

Eu tentei a segunda versão, no entanto, não funcionou, a primeira versão funcionou, mas eu só quero ter certeza de que não estou dobrando a chamada do jQuery.
Jason

@ Jason, você nem precisa disso; exatamente o que eu publiquei
Explosion Pills

Você poderia, por favor, ver esta pergunta wordpress.stackexchange.com/questions/214858/…

E se algum seletor estiver do lado de fora jQuery(function ($) { ..., você deve usar em jQueryvez de$
Misha Rudrastyh 13/10

Obrigado mano. Aprecie
Desper

153

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


28

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


2
Solução fantástica. A principal razão pela qual isso funciona é porque ";" fecha qualquer outra instância do jquery já ativa e, ao mesmo tempo, declara outra nova localmente. Quando você tem apenas alguns segundos para implementar um layout na produção ou muitos plugins wordpress em execução, isso pode ser ótimo. Mas lembre-se de que você deve corrigir o problema, este é apenas um curativo, mas se for uma página de informações, tudo bem.
luis

@ Martha James Isso funciona para mim, então incluí-lo. Pode ou trabalho maynot para os outros
Bikram Shrestha

19

Você pode evitar conflitos como este

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

7
Ou $ = jQuery.noConflict ();
Cyssoo


13

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>

8

Você precisa passar $ in function ()

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

// jQuery code is in here

});
</script>

3
Como isso é diferente da resposta dada acima (dos três anos anteriores)?
Rnevius 03/02

8

substitua o $sinal jQuery por:

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

7

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.


Eu acho que é melhor do que algo tenta acessar o JQuery antes de ser definido, o que, por sua vez, quebra tudo. Tente mover seus scriptcujas referências JQueryao topo do seu index.htmle provavelmente vai funcionar
Dan Moldovan

Essa resposta precisa de mais visibilidade. Sim, os outros serão válidos se o espaço para nome padrão for utilizado com uma versão do jQuery carregada através de algum outro plugin. Mas verifique se você não está inadvertidamente (e possivelmente desnecessariamente) carregando o jQuery mais de uma vez.
edkay


5

Usar

jQuery(document).

ao invés de

$(document).

ou

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

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

4

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>


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

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

agora use jq no lugar de jQuery


3

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.


2

Você pode usar

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

ou

(function ($) { ... }(jQuery));
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.