JS & jQuery non è in grado di rilevare elementi html e di dire che sono indefiniti

Sono abbastanza nuovo per JS e jQuery e sto cercando di far sì che un lettore di sottotitoli li usi. Sfortunatamente, sono bloccato in una fase molto precoce.JS & jQuery non è in grado di rilevare elementi html e di dire che sono indefiniti

Quando provo a selezionare alcuni elementi HTML attraverso un file .js, si comporta come se non fosse in grado di individuare l'elemento che sto chiedendo e non accade nulla. Se provo ad avvisare il valore o l'HTML degli elementi, avvisa undefined.

Quindi questo è il codice:

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'); 
});

Grazie.

fonte

2015-04-18 Or Nevo

inserire lo script completo sotto $ (document) .ready (function() {}); blocco –

Si sta vincolando l'evento prima che l'elemento sia disponibile nel DOM. –

@Or Navo che stai tentando di accedere all'elemento o alla variabile DOM prima dell'inizializzazione vai qui http://www.w3schools.com/jsref/jsref_undefined.asp e https://javascriptweblog.wordpress.com/2010/08/16/ understanding-undefined-and-prevention-referenceerrors/ –

Poiché il tag script è sopra l'HTML che definisce gli elementi su cui agisce, non può trovarli perché non esistono al momento dell'esecuzione di quel codice. Ecco l'ordine in cui le cose stanno accadendo nella tua pagina: vengono creati

Il html e head elementi
L'elemento meta viene creato e il suo contenuto ha osservato dal parser
Viene creato l'elemento script per jQuery
il parser ferma e attende il file jQuery per caricare
Una volta caricato, il file jQuery viene eseguito
di analisi continua
L'elemento script per il codice viene creato
Il parser ferma e attende per il file da caricare
Una volta caricato, il codice di script viene eseguito — e non trova alcuna elementi, perché non ci sono ancora elementi div
L'analisi continua
Il browser termina l'analisi e la creazione della pagina, che include la creazione degli elementi a cui si sta tentando di accedere in lo script

modi per correggerlo:

Spostare gli elementi script fino alla fine, appena prima del tag di chiusura </body>, quindi tutti gli elementi esistono prima del vostro codice viene eseguito. Escludendo una buona ragione per non farlo, questa è solitamente la soluzione migliore.
Utilizzare jQuery's ready feature.
Utilizzare lo defer attribute sull'elemento di script, ma attenzione che non tutti i browser lo supportano ancora.

Ma di nuovo, se si controlla dove vanno gli elementi dello script, il numero 1 è solitamente la soluzione migliore.

fonte

2015-04-18 11:31:12

Ok, mi ha davvero aiutato con il problema e capito il processo, grazie mille! –

Infine, una buona risposta alla mia domanda MSO: http://meta.stackoverflow.com/questions/287905/is-there-a-canonical-jquery-document-ready-question#autocomment179053 – Barmar

È necessario eseguire lo script dopo l'evento DOM Ready. In jQuery lo fa:

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

fonte

2015-04-18 11:31:53 Mihail

Quando si chiama il metodo .click(), dom non è completamente caricato. Bisogna aspettare tutto in DOM è loaded.So dovete cambiare le vostre script.js a questo:

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

fonte

2015-04-18 11:39:25 cssGEEK

JS & jQuery non è in grado di rilevare elementi html e di dire che sono indefiniti

risposta

Problemi correlati