Uncaught ReferenceError: $ non è definito quando jquery.js è alla fine del documento

Ho un progetto in cui tutti i file JS sono referenziati nel piè di pagina, come raccomandato per la velocità di caricamento della pagina, incluso il collegamento al file Jquery . Questo codice produce un "ReferenceError Uncaught", presumo perché Jquery non è stata definita prima che il mio script si chiama:

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> 
    </head> 
    <body> 
     <p> 
      <a href="#" data-toggle="popover" title="first popover" id="example">hover over me</a> 
     </p> 
     <script type="text/javascript"> 
      $(function(){ 
       $('#example').popover({ trigger:'hover' }); 
      }) 
     </script> 

     <script type="text/javascript" src="js/jquery.min.js"></script> 
     <script type="text/javascript" src="js/bootstrap.js"></script> 
    </body> 
</html>

Se mi muovo il link jQuery per l'intestazione, quindi il codice viene eseguito bene, ma questo rallenterà il tempo di caricamento della pagina.

Esiste un modo migliore per dichiarare la mia funzione in modo tale da non generare questo errore UncaughtReference o mantenere il collegamento Jquery nella testa la soluzione migliore?

fonte

2013-04-17 Ila

si deve caricare lo script prima di iniziare a scrivere codice basandosi su detto script. – tymeJV

È perché si sta tentando di utilizzare jQuery prima che sia stato caricato jQuery. Hai bisogno di mettere librerie come jQuery nella testa del documento

<head> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> 
    <script type="text/javascript" src="js/jquery.min.js"></script> 
    <script type="text/javascript" src="js/bootstrap.js"></script> 
</head>

Generalmente i vostri script andare alla fine del documento vicino al tag corpo vicino e le biblioteche come quelli che si sta utilizzando andare al <head>

fonte

2013-04-17 15:22:37 brenjt

Non necessariamente nel 'testa'; appena prima di qualsiasi altro JavaScript che si basa su jQuery. – bdesham

Grazie, questo risponde alla domanda che stavo ponendo: che in questo caso, poiché gli script saranno contenuti all'interno del corpo del documento, e non posso spostarli, il posto migliore per chiamare JQuery è nella testa. – Ila

È necessario includere jQuery prima di fare riferimento alla libreria jQuery.

Cambio a questo:

<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/bootstrap.js"></script> 

<script type="text/javascript"> 
$(function(){ 
    $('#example').popover({ trigger:'hover' }); 
}); 
</script>

Si noti inoltre che si tratta di una buona idea includere jQuery e altri JavaScript nel piè di pagina del documento per garantire che il rendering pagina non è in ritardo.

fonte

2013-04-17 15:22:18

OK. A causa delle limitazioni del progetto (codice generato dall'applicazione), la posizione DOM del contenuto dello script non è negoziabile, quindi dovrò inserire JQuery nell'intestazione. – Ila

@Ali: Non necessariamente, controlla la mia risposta. –

Gli script vengono eseguiti dall'alto verso il basso in ordine, quindi si sta tentando di fare riferimento alla libreria jQuery prima che venga caricata.

Per risolvere questo, è possibile inserire i propri script in un file separato e importarli dopo la libreria jQuery o inserire il tag dello script sotto l'importazione di jQuery.

fonte

2013-04-17 15:23:43 cfs

Recentemente sul sito jsTree ho visto un'altra tecnica

in alto (nel tag HEAD) si trova appena questo:

<script>window.$q=[];window.$=window.jQuery=function(a){window.$q.push(a);};</script>

ora che è possibile fare <script>$(function() { /* your $() calls here */ });</script> quando e dove vuoi ...

alla fine includono jquery.js come usal e poi l'ultimo script è:

<script>$.each($q,function(i,f){$(f)});$q=null;</script>

Spero che questo è utile a qualcuno ...

fonte

2016-02-11 16:56:59 Badjem79

Mi piace mantenere jQuery in fondo, ti basta per assicurarsi che l'intera DOM è stato caricato prima, e di verificare che, senza jQuery come questo non è utilizzabile ancora . Provare a utilizzare questo, invece:

document.addEventListener("DOMContentLoaded", function(event) { 
     $(function(){ 
      $('#example').popover({ trigger:'hover' }); 
     }); 
});

fonte

2016-05-08 18:46:33 cpres

Grazie, è lavoro, questa dovrebbe essere la risposta – Conan

Hai bisogno di rimuovere questo ascoltatore dopo il fatto in qualsiasi momento? – whispers

Uncaught ReferenceError: $ non è definito quando jquery.js è alla fine del documento

risposta

Problemi correlati