TypeError: 'undefined' não é uma função (avaliando '$ (document)')

139
  1. Estou usando um site WordPress.
  2. Estou incluindo este script no cabeçalho.

Quando o script é carregado, recebo este erro:

TypeError: 'undefined' não é uma função (avaliando '$ (document)')

Não tenho idéia do que está causando ou do que isso significa.

No firebug, recebo o seguinte:

$ não é uma função

dcolumbus
fonte
4
Certifique-se de incluir a biblioteca jQuery antes do seu script personalizado e de que não haja erros na Netguia do Firebug (verifique se o jQuery é realmente carregado).
precisa saber é o seguinte
... sim, é claro que o jQuery está sendo carregado antes da mão. Tenho certeza de que é uma questão de enfileiramento do WordPress.
precisa saber é o seguinte

Respostas:

239

Wordpress usa jQuery no modo noConflict por padrão. Você precisa fazer referência a ela usando jQueryo nome da variável, não $, por exemplo, use

jQuery(document);

ao invés de

$(document);

Você pode facilmente agrupar isso em uma função de execução automática, para que $se refira ao jQuery novamente (e evite poluir também o espaço para nome global), por exemplo

(function ($) {
   $(document);
}(jQuery));
El Yobo
fonte
5
O script não é necessário; você pode simplesmente ligar em jQuery(document)vez de $(document)onde quiser. Se você deseja usar $, o script acima simplesmente cria uma função que recebe um argumento e $depois o executa jQuery; em resumo, dentro da função, $aponta para jQuery como seria de esperar.
precisa
2
Na verdade, o que eu fiz foi colocar o meu normal $(document).ready(function() { // code });no lugar do seu $(document);... que funcionou como um encanto.
precisa saber é o seguinte
1
Sim, era o que eu estava sugerindo - "dentro da função, $ aponta para jQuery como seria de esperar".
precisa
Bem, você economiza alguns caracteres dessa maneira :) Mais detalhes sobre a forma! Function () {} () da instrução auto-executável .
precisa
Eu sei que é antigo @ElYobo, mas acho que você pode editar sua postagem e adicionar seu exemplo do seu primeiro comentário à resposta como um segundo exemplo. Obrigado por me poupar tempo =)
Manatax
25

Use jQuery's noConflict. Ele fez maravilhas para mim

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

Ou seja, supondo que você incluiu o jQuery no seu HTML

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

Usa isto:

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

Experimente este trecho:

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

Funcionou para mim, talvez também o ajude.

Gurpreet Dhanoa
fonte
11

Eu tive esse problema apenas no Chrome.

Eu tentei adicionar

var $ =jQuery.noConflict();

pouco antes de ligar

$(document).ready(function () {

Funcionou.

Muito obrigado

Le_Dhul
fonte
Obrigado por este. Eu sabia que poderia resolver o problema usando "jQuery" em vez de "$", mas meu problema era que ele desabilita a edição do Komodo quando escrito dessa maneira, então eu tive que escolher entre obter a dica / conclusão de código em $ ou ter meu JavaScript realmente funcionando. Este método me permite ter os dois.
George Kendros
6

Verifique também a inclusão do jQuery, seguido por alguns componentes / outras bibliotecas (como a jQuery UI) e depois inclua novamente o jQuery novamente - isso redefinirá o jQuery e eliminará os auxiliares do componente (como .datepicker) da instância.

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

Coloque o seu código js dentro do fechamento acima, ele deve resolver o problema.

Bikram Shrestha
fonte
4

Eu usaria isso

(function ($) {
   $(document);
}(jQuery));
Mínimo
fonte
2

Eu também enfrentei esses problemas muitas vezes na operadora de desenvolvimento da Web. Na verdade, não é um conflito de JS. Quando carregamos o site html no navegador, não enfrentamos esse erro, mas quando carregamos esse tipo de site através do host local, enfrentamos esse problema. Isso é por causa do localhost. Quando carregamos scripts através do host local, ele varre o script e renderiza a saída. Mas quando não usamos o host local. Basta escanear a saída. Por exemplo, quando escrevemos código php ao lado do host local e rodamos sem host, obtemos erro. Mas se o código estiver correto e for executado no host, obtemos saída real e, quando usamos o elemento inspecionado, obtemos o código de saída no formato HTMl, mas não no formato PHP, isso ocorre devido à renderização do código.

Isso está causando erro. Portanto, para corrigir esse erro de código jquery, uma das soluções pode estar usando esse método.

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

O que esse código faz é registrar '$' como a variável para a função aplicando jquery. Senão, por padrão, o arquivo .js é lido apenas como javascript.

Rajan Lama
fonte
1

Também encontrei esse problema ao incluir o jQuery no cabeçalho da minha página, sem perceber que o host já o incluía na página automaticamente. Então carregue sua página ao vivo e verifique a fonte para ver se o jQuery está sendo vinculado.

FrostyL
fonte
1

Duas coisas:

  1. Verifique se você adicionou a biblioteca jQuery antes do seu $ (documento).
  2. Em seguida, basta alterar todos os "$" com: jQuery, como nos comentários anteriores.
Jorge Alejandro Inturias
fonte
1

embrulhe todo o script entre este ...

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

Muitas bibliotecas JavaScript usam $ como uma função ou nome de variável, assim como o jQuery. No caso do jQuery, $ é apenas um alias para o jQuery, portanto, toda a funcionalidade está disponível sem o uso de $. Se você precisar usar outra biblioteca JavaScript ao lado do jQuery, retorne o controle $ para a outra biblioteca com uma chamada para $ .noConflict () . Referências antigas de $ são salvas durante a inicialização do jQuery; noConflict () simplesmente os restaura.

Jitendra Damor
fonte
1

Você pode usar jQuery e $ no snippet abaixo. funcionou para mim

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

Você pode passar $ em function ()

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

// jQuery code is in here

});

ou você pode substituir $(document);por estejQuery(document);

ou você pode usar jQuery.noConflict()

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