ReferenceError não capturado: $ não está definido?


658

Como esse código gera uma

ReferenceError não capturado: $ não está definido

quando estava tudo bem antes?

$(document).ready(function() {
    $('#tabs > ul').tabs({ fx: { opacity: 'toggle' } });
    $('#featuredvid > ul').tabs();
});

Os resultados nas guias não fecham mais.

jQuery é referenciado no cabeçalho:

<script language="JavaScript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/js/sprinkle.js"></script>
<script language="JavaScript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/js/jquery-1.2.6.min.js"></script>
<script language="JavaScript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/js/jquery-ui-personalized-1.5.2.packed.js"></script>

<script language = "JavaScript" type = "text / javascript" src = "<? php echo get_option ('siteurl')?> / js / jquery-1.2.6.min.js"> </script> Aceite isso top
captainsac

No meu caso, o JQuery estava na seção rodapé, então a função JS foi chamada primeiro.
Daniel Beltrami

Isso responde sua pergunta? ReferenceError: $ não está definido
Brynn

Respostas:


689

Você deve colocar as referências aos scripts jquery primeiro.

<script language="JavaScript" type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/jquery-ui-personalized-1.5.2.packed.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/sprinkle.js"></script>

27
Apenas para ter certeza de que isso está claro: você não pode colocar a referência de script para jquery-ui antes do próprio script jquery. Foi isso que me corrigiu o problema: primeiro jquery-xxxmin.js, depois jquery-ui-xxxxxx.js.
Wagner da Silva

26
2 anos depois, ainda a resposta não está "marcada") Este artigo descreve este e mais 4 casos mais comuns quando esse erro ocorre.
Uzbekjon

2
@Uzbekjon Isso resolveu para mim. O caminho para o script estava errado em um dos meus HTMLarquivos.
Adam Jensen

@ Jeremy, muito obrigado. Coloque-o também antes de qualquer visualização parcial (mvc) para que esteja disponível para qualquer script na parcial.
Andrew Day

1
@Uzbekjon há quase 10 anos e ainda não está marcado. Obrigado por fornecer o link do artigo.
Modo

235

Você está chamando a função ready antes da inclusão do jQuery JavaScript. Faça referência ao jQuery primeiro.


30
@ RamSharma Na verdade, esta é a resposta certa. Você não precisa de mais nada para resolver o problema.
Derek朕會功夫

Sim. Este foi o meu problema. Simplesmente tinha jquery APÓS referenciar meu arquivo js. D'oh!
dogonaroof de

No meu caso, tive que remover o adiamento de chaves de <script src = "/ js / jquery-1.2.6.min.js" adiar> </script>
Charden Daxicen em

123

Foi isso que resolveu para mim. Originalmente, fui ao Google, copiei e colei o snippet sugerido para o jQuery na página da CDN:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

O snippet não inclui o HTTP:ou HTTPS:no srcatributo, mas meu navegador, o FireFox, precisava dele, então eu o mudei para: edit: isso funcionou para mim também com o Google Chrome

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Então funcionou.


13
A rigor, o snippet / exemplo do Google está correto - o atributo src é um protocolo sem URL, o que significa que o navegador deve usar o protocolo (HTTP / HTTPS) da página de chamada. Consulte paulirish.com/2010/the-protocol-relative-url . Essa é uma prática recomendada para evitar avisos de conteúdo misto se sua página for veiculada em SSL e os scripts não.
precisa saber é

12
Um problema comum aqui, provavelmente, é quando URLs relativas ao protocolo são usadas durante o desenvolvimento e, em um dia ensolarado, você tenta carregar uma página de um arquivo local. Seu navegador tentará carregar de maneira otimista file://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.jse você se pergunta por que ele não aparece no console da rede.
Pieter Ennes

obrigado @PieterEnnes, esse foi exatamente o meu caso. Obrigado também ao respondente!
Jwg 19/08

43

Se seu script personalizado for carregado antes do carregamento do plug-in jQuery no navegador, esse tipo de problema poderá ocorrer. Portanto, sempre mantenha seu próprio código JavaScript ou jQuery depois de chamar o plugin jQuery, para que a solução seja:

Primeiro, adicione o link ao arquivo jQuery hospedado no GoogleApis ou a um arquivo jQuery local que você baixará em http://jquery.com/download/ e hospedará no seu servidor:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

ou qualquer plugin para jQuery. Em seguida, coloque o link ou código do arquivo de script personalizado:

<script src="js/custom.js" type="text/javascript"></script>

3
If your custom script is loaded before the jQuery plugin is loaded to the browser then this type of problem may occur a resposta perfeita .. no meu script caso foi em rodapé
echoashu

41

No meu caso, eu estava colocando meu .jsarquivo antes do link do script jQuery, colocando o .jsarquivo após o link do script jQuery resolvendo meu problema.

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="exponential.js"></script>

Apenas usei isso para corrigir meu jschart.
indofraiser

isso corrigiu o problema, o .js arquivo deve ser colocado antes do link do script jQuery.
O Método Científico

27

Ok, meu problema era diferente - era o modelo de segurança de documentos no Chrome .

Observando as respostas aqui, era óbvio que, de alguma forma, eu não estava carregando meus arquivos jquery antes de chamar as $(document).ready()funções etc. No entanto, eles estavam todos nas posições corretas.

No meu caso, isso ocorreu porque eu estava acessando o conteúdo por uma conexão HTTPS segura, enquanto a página estava tentando baixar os dados hospedados pela CDN do google etc. A solução foi armazená-los localmente e depois incluí-los diretamente, e não no diretório CDN de cada vez.

Edit : A outra maneira de fazer isso é vincular todas as coisas hospedadas na CDN como https: // em vez de http: // - então o modelo não reclama.


5
Além disso, observe que você pode deixar o protocolo fora dos links e ele escolherá o apropriado, dependendo do contexto (assumindo que existem as versões http e https). Veja stackoverflow.com/a/3622615/4332
Adrian Mouat

Sim. este resolveu meu problema, eu estava carregando os scripts de um URL como este ´ // cdnjs.cloudflare.com / ajax / libs / jquery / 1.12.0 / jquery.min.js '. Usar o ' cdnjs ...' funciona muito bem
user9869932

25

Adicione a biblioteca antes de iniciar o script. Você pode adicionar qualquer um destes CDN a seguir para iniciá-lo.

Google:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Microsoft

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>

Jquery

Se você quiser outra versão do CDN do Jquery, verifique este link .

Depois disto:

<script type="text/javascript">
$(function(){
    //your stuff
});
or
$(document).ready(function(){
    //your stuff
});    
</script>

Wordpress:

<script type="text/javascript">
var $ = jQuery;
jQuery(document).ready(function($){
     //your stuff
});
</script>

19

Se estiver no wordpress, pode ser necessário alterar

$(document).ready(function() {

para

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

ou adicione

var $ = jQuery;

antes

$(document).ready(function() {

19

Eu tive exatamente o mesmo problema e nenhuma dessas soluções acima ajudou. no entanto, eu apenas vinculei os .cssarquivos após eles .jse o problema desapareceu milagrosamente. Espero que isto ajude.


13
Primeiro, para melhorar o desempenho da renderização da página, você sempre deve vincular arquivos CSS antes dos arquivos JS. Segundo, a ordem dos arquivos css e js não deve ter efeito na citação atual.
Uzbekjon

12
"O que corrigiu o seu problema não deve corrigi-lo e você não deve fazer o que corrigiu o seu problema."
21715 Andrew

15

Eu queria tentar tornar meu script assíncrono . Então eu esqueci e quando fui ao ar, o arquivo [custom] .js carregava apenas 50% do tempo antes do jQuery.js.

Então eu mudei

<script async src="js/script.js"></script>

para

<script src="js/script.js"></script>

14

No meu caso, eu tinha esse referenceError, pois a ordem das chamadas de script estava errada. Resolvido isso alterando a ordem:

<script src="js/index.js"></script>
<script src="js/jquery-1.10.2.js"></script>

para

<script src="js/jquery-1.10.2.js"></script>
<script src="js/index.js"></script>

1
Principalmente este foi o problema que eu também encontrado quando um erro de referência acontece por '$'
Dipak

9

Eu tive o mesmo problema e resolvi colocando o jQuery na parte superior de todos os códigos javascript que tenho no meu código.

Algo assim:

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="js/app.js" type="text/javascript"></script>
<script src="js/form.js" type="text/javascript"></script>
<script src="js/create.js" type="text/javascript"></script>
<script src="js/tween.js" type="text/javascript"></script>

A esperança pode ajudar alguém no futuro.


8

Você está chamando a ready()função antes da inclusão do jQuery JavaScript. Faça referência ao jQuery primeiro.

Se você estiver no ASP.NET MVC, poderá especificar quando seu código JS deve ser renderizado, fazendo o seguinte:

1, No seu page.cshtmlenvoltório sua <script>tag em uma seção, e dar-lhe um nome, o nome comum de uso é 'scripts':

@section scripts {
    <script>
        // JS code...
    </script>
}

2, Em sua _Layout.cshtmlpágina @RenderSection("Scripts", required: false), adicione -o depois de fazer referência à fonte Jquery, isso fará com que seu código JS seja renderizado mais tarde que o Jquery.


6

Se você estiver fazendo isso no .Net e tiver o arquivo de script referenciado corretamente e o jQuery estiver bem, verifique se os usuários têm acesso ao arquivo de script. O projeto em que eu estava trabalhando (um colega de trabalho) teve seu web.config negando acesso a usuários anônimos. A página em que eu estava trabalhando era acessível a usuários anônimos, portanto, eles não tinham acesso ao arquivo de script. Lançamos o seguinte no web.config e tudo estava certo no mundo:

  <location path="Scripts">
    <system.web>
      <authorization>
        <allow users="*"/>
      </authorization>
    </system.web>
  </location>

6

No meu caso, foi um erro de digitação, esqueci uma barra invertida e estava referenciando a fonte incorretamente.

Antes src="/scripts/jquery.js"

Depois de    src="scripts/jquery.js"


5

O arquivo de origem jquery-1.2.6.min.jsnão é chamado de comando jQuery, $()é executado anteriormente <..src='jquery-1.2.6.min.js'>.

Por favor, execute <.. src="/js/jquery-1.2.6.min.js..">primeiro e verifique se o caminho src está correto e execute o comando jquery

$(document).ready(function() 

5

Isso aconteceu comigo antes.

O motivo foi que eu estou conectando o Android a uma visualização da Web com um JS. E enviei um parâmetro sem aspas.

js.sayHello(hello);

e quando eu mudei para

js.sayHello('hello');

funcionou.


Não tenho idéia do parâmetro sem aspas significa ... parece que você teve um erro de referência.
Aluan Haddad

Eu tive um problema no Freemarker e o motivo foi a ausência de aspas simples, de modo que o valor foi tratada não como uma corda, mas como uma variável
Torina

4

Seu arquivo JavaScript está ausente, portanto ocorreu este erro. Basta adicionar o arquivo JavaScript dentro da <head>tag. Veja o exemplo:

<script src="js/sample.js" type="text/javascript"></script>
<link href="css/sample.css" rel="stylesheet" type="text/css" />

ou adicione o seguinte código na tag:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

4

O erro também ocorrerá nos dois cenários a seguir.

  1. O elemento @section scripts está ausente no arquivo HTML
  2. Erro ao acessar elementos DOM. Por exemplo, o acesso ao elemento DOM é mencionado como $ ("js-toggle") em vez de $ (". Js-toggle"). Na verdade, o período está faltando

Então, três coisas a serem seguidas - verifique se os scripts necessários foram adicionados, verifique se foram adicionados na ordem necessária e os erros de terceira sintaxe em seu Java Script.


Sim. e para os atributos id $ ( '# someDiv')
cagcak

3

Doh! Eu tinha aspas misturadas nas minhas tags que causaram a quebra da referência de jquery. Fazer uma inspeção no Chrome me permitiu ver que o arquivo não estava vinculado corretamente.


3

No meu caso, esqueci de incluir isso:

 <script src ="jquery-2.1.1.js"></script>

No começo eu estava incluindo apenas o jquery-mobile que estava causando esse erro.


3

Modifiquei a tag de script para apontar para o conteúdo certo e alterei a ordem do script para ser a correta no editor. Mas esqueci totalmente de salvar a mudança.


2

Eu tive um problema semelhante e foi porque estava faltando um fechamento em um link de folha de estilo.


2
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="local_xxx.js"></script>

Eu tenho um problema semelhante, e você sabe o que é, é porque a rede está desconectada quando eu testo na visualização da web do dispositivo Android e não percebo, e o js local não tem problema em carregar porque não precisa de rede. Parece ridículo, mas desperdice minha ~ 1 hora para descobrir isso.


2

Você não fez referência a uma biblioteca jQuery.

Você precisará incluir uma linha semelhante a essa em seu HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

2

Eu tive um problema semelhante. Meu servidor de teste estava funcionando bem com "http". No entanto, falhou na produção que possuía SSL.

Assim, na produção, adicionei "HTPPS" em vez de "HTTP" e, em teste, mantive como é "HTTP".

Teste:

wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', array(), null, false );

wp_register_script( 'custom-script', plugins_url( '/js/custom.js', __FILE__ ), array( 'jquery' ) );

Produção:

wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', array(), null, false );

wp_register_script( 'custom-script', plugins_url( '/js/custom.js', __FILE__ ), array( 'jquery' ) );

Espero que isso ajude alguém que está trabalhando no wordpress.


1

Estranho o suficiente, meu problema estava vindo do PHP.

Uma chamada à API REST falhou e interrompeu o carregamento das bibliotecas posteriormente. Desde que a falha foi da chamada REST, não estava me dando um erro de compilação php.

Mantenha isso como uma opção também, se o carregamento do jquery parecer ok.


1

Eu tive esse problema quando estava navegando na Internet pelo meu hotspot móvel. também estava compactando imagens e adicionou o seguinte script na parte inferior da etiqueta do corpo

<script language="javascript"><!--
bmi_SafeAddOnload(bmi_load,"bmi_orig_img");//-->
</script>

Quando eu me conectei à conexão wifi adequada, tudo parece funcionar para mim. Espero que isso ajude alguém.


1

Isso também pode acontecer, se houver um problema de rede. O que significa que, mesmo que os "scripts jquery" estejam no local e sejam incluídos antes do uso, já que os scripts jquery não estão acessíveis no momento do carregamento da página, as definições para o "$" são tratadas como "referências indefinidas".

PARA FINS DE TESTE / DEBUG :: Você pode tentar acessar o URL "jquery-script" no navegador. Se estiver acessível, sua página deverá carregar corretamente, caso contrário, mostrará o erro mencionado (ou outros erros relevantes do script). Exemplo - http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js deve estar acessível no navegador (ou posições de contexto do navegador).

Eu tive um problema semelhante, no qual consegui carregar a página html (usando scripts) no meu navegador host do Windows, mas não consegui carregar no vm-ubuntu. Resolvendo o problema de rede, resolvi o problema.


0
var $ = jQuery;
jQuery(document).ready(function($){

1
Isso absolutamente não é uma resposta. Você precisa adicionar algumas explicações.
precisa saber é o seguinte

Esta é uma solução para Wordpressvocê mencionar isso.
Hexodus 2/17/17

Você salvou o meu dia. Estava lutando para fazê-lo no WordPress e nada, mas esta solução funcionou como um encanto.
Rhimv 8/17
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.