JS i jQuery nie mogą wykryć elementów html i mówią, że są nieokreślone.

Jestem całkiem nowy dla JS i jQuery i staram się, aby odtwarzacz napisów używał ich. Niestety, utknąłem na bardzo wczesnym etapie.JS i jQuery nie mogą wykryć elementów html i mówią, że są nieokreślone.

Kiedy próbuję wybrać niektóre elementy HTML poprzez plik .js, działa tak, że nie można zlokalizować elementu, o który pytam, i nic się nie dzieje. Jeśli spróbuję zasygnalizować wartość lub kod HTML elementów, alertuje undefined.

Więc to jest kod:

HTML

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
     <script src="jquery-2.1.3.min.js"></script> 
     <script src="script.js"></script> 
     <style type="text/css"> 
      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;   
      } 
     </style> 


    </head> 
    <body> 
     <div id="wrapper"> 
      <h3>Select subtitles file</h3> 
       <img src="browse.png" alt="browse"> 
     </div> 
     <input type="file" accept=".srt" id="file"> 
    </body> 
</html>

script.js

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

dzięki.

Źródło

2015-04-18 Or Nevo

umieścić kompletny skrypt pod $ (document) .ready (function() {}); block –

Jesteś wiążącym zdarzeniem, zanim element będzie dostępny w DOM. –

@Or Navo próbujesz uzyskać dostęp do elementu DOM lub zmiennej przed jej zainicjowaniem tutaj http://www.w3schools.com/jsref/jsref_undefined.asp i https://javascriptweblog.wordpress.com/2010/08/16/ understand-undefined-and-prevention-referenceserrors/ –

Ponieważ tag script jest powyżej HTML określające elementy, które działa na nie można znaleźć je, bo one nie istnieją, jak, kiedy, że kod działa. Oto kolejność, w której rzeczy dzieją się na stronie:

html i head elementy są tworzone
Element meta jest tworzony i jego zawartość zauważyć przez parser
script element jQuery jest tworzony
parser zatrzymuje i czeka na pliku jQuery załadować
po załadowaniu plik jQuery jest wykonany
Przetwarzanie kontynuuje
script element kodu tworzony jest
Parser zatrzymuje i czeka na swojego pliku do załadowania
Po załadowaniu kodu skryptu — i nie znaleźć żadnego elementów, ponieważ nie ma jeszcze elementów div
Parsowanie kontynuuje
Przeglądarka zakończy przetwarzanie i tworzenie strony, która obejmuje tworzenie elementów, do których próbujesz uzyskać dostęp skrypt

Ways to poprawić:

Przenieś script elementy do samego końca, tuż przed tagiem zamykającym </body>, więc wszystkie elementy istnieć zanim Twój kod działa. Poza dobrym powodem, aby tego nie robić, zwykle jest to najlepsze rozwiązanie.
Użyj jQuery's ready feature.
Użyj elementu defer attribute w elemencie skryptu, ale należy pamiętać, że nie wszystkie przeglądarki jeszcze go obsługują.

Ale znowu, jeśli kontrolujesz, gdzie idą elementy skryptu, najlepiej jest # 1.

Źródło

2015-04-18 11:31:12

OK, to naprawdę pomogło mi z problemem i zrozumieniem procesu, dziękuję bardzo! –

Wreszcie, dobra odpowiedź na moje pytanie MSO: http://meta.stackoverflow.com/questions/287905/is-there-a-canonical-jquery-document-ready-question#autocomment179053 – Barmar

Powinieneś wykonać swój skrypt po zdarzeniu DOM Ready. W jquery robi tak:

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

Źródło

2015-04-18 11:31:53 Mihail

Po wywołaniu metody .click() dom nie jest w pełni załadowany. Trzeba czekać, aż wszystko w DOM jest loaded.So trzeba zmienić script.js do tego:

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

Źródło

2015-04-18 11:39:25 cssGEEK

JS i jQuery nie mogą wykryć elementów html i mówią, że są nieokreślone.

Odpowiedz

Powiązane problemy