JS e jQuery não podem detectar elementos html, e dizem que eles são indefinidos

Eu sou muito novo para JS e jQuery , e estou tentando fazer um player de legendas usando-os. Infelizmente, estou preso em um estágio muito inicial.

Quando eu estou tentando selecionar alguns elementos HTML através de um arquivo .js, ele age como se não pudesse localizar o elemento que estou pedindo, e nada acontece. Se eu tentar alertar o valor ou o HTML dos elementos, ele alerta undefined .

Então este é o código:

HTML

         body{ margin: 0px; padding: 0px; } #wrapper{ width: 150px; text-align: center; background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#75bdd1), color-stop(14%,#75bdd1), color-stop(100%,#2294b3)); padding: 10px 2px; } h3{ font-family: Arial, Helvetica, sans-serif; } img{ width: 50px; margin: 0 auto; } input{ display: none; }    

Select subtitles file

browse

script.js

 $("div").click(function () { console.log('loaded'); }); 

Obrigado.

Como sua tag de script está acima do HTML que define os elementos que ela atua, ela não pode encontrá-los porque eles não existem a partir de quando esse código é executado. Aqui está a ordem em que as coisas estão acontecendo na sua página:

  1. Os elementos html e head são criados
  2. O elemento meta é criado e seu conteúdo é anotado pelo analisador
  3. O elemento de script para jQuery é criado
  4. O analisador pára e aguarda o carregamento do arquivo jQuery
  5. Uma vez carregado, o arquivo jQuery é executado
  6. A análise continua
  7. O elemento de script para o seu código é criado
  8. O analisador pára e aguarda seu arquivo ser carregado
  9. Uma vez carregado, seu código de script é executado – e não encontra elementos, porque ainda não há elementos div
  10. A análise continua
  11. O navegador termina a análise e a construção da página, o que inclui a criação dos elementos que você está tentando acessar no script

Formas de corrigir isso:

  1. Mova os elementos de script até o final, pouco antes da tag de fechamento , para que todos os elementos existam antes de seu código ser executado. Exceto um bom motivo para não fazer isso, esta é geralmente a melhor solução.

  2. Use o recurso ready do jQuery.

  3. Use o atributo defer no elemento script, mas cuidado com o fato de nem todos os navegadores suportarem ainda.

Mas, novamente, se você controla onde os elementos do script vão, o número 1 é geralmente sua melhor aposta.

Quando você chama o método .click (), o dom não está totalmente carregado. Você tem que esperar até que tudo em DOM seja carregado. Então você precisa mudar seu script.js para isso:

 $(document).ready(function(){ $("div").click(function () { console.log('loaded'); }); }); 

Você deve executar seu script após o evento DOM Ready. No jquery isso acontece:

 $(function(){ $("div").click(function () { console.log('loaded'); }) });