Quando dovrei usare la funzione document.ready di jQuery?

Mi è stato detto di usare document.ready quando ho iniziato a usare Javascript / jQuery ma non ho mai veramente imparato il perché.

Qualcuno potrebbe fornire alcune linee guida di base su quando ha senso avvolgere il codice javascript / jquery nel document.ready di jQuery.ready?

Alcuni argomenti che mi interessano:

  1. jQuery’s .on() metodo: uso un po ‘il metodo .on() per AJAX (tipicamente su elementi DOM creati dynamicmente). I gestori di clic .on() dovrebbero sempre essere all’interno di document.ready ?
  2. Prestazioni: è più performante mantenere diversi javascript / oggetti jQuery all’interno o all’esterno di document.ready (inoltre, la differenza di prestazioni è significativa?)?
  3. Scopo dell’object: le pagine caricate con AJAX non possono accedere agli oggetti che si trovavano all’interno del documento della pagina precedente. Già, corretto? Possono accedere solo agli oggetti che erano al di fuori di document.ready (cioè oggetti veramente “globali”)?

Aggiornamento: per seguire una best practice, tutto il mio javascript (la libreria jQuery e il codice della mia app) si trova nella parte inferiore della mia pagina HTML e sto usando l’attributo defer sugli script contenenti jQuery sulle mie pagine caricate con AJAX in modo che Posso accedere alla libreria jQuery su queste pagine.

    In parole semplici,

    $(document).ready è un evento che si $(document).ready quando il document è pronto.

    Supponiamo che tu abbia inserito il tuo codice jQuery nella sezione head e provando ad accedere ad un elemento dom (un anchor, un img ecc.), Non sarai in grado di accedervi perché html è interpretato dall’alto verso il basso e gli elementi html non sono presenti quando il tuo codice jQuery viene eseguito.

    Per ovviare a questo problema, inseriamo ogni codice jQuery / javascript (che utilizza DOM) all’interno della funzione $(document).ready che viene chiamata quando è ansible accedere a tutti gli elementi dom .

    E questo è il motivo, quando inserisci il tuo codice jQuery in fondo (dopo tutti gli elementi dom, appena prima di ), non c’è bisogno di $(document).ready

    Non è necessario inserire on metodo all’interno di $(document).ready solo quando si utilizza on metodo su document causa della stessa ragione per cui ho spiegato sopra.

      //No need to put inside $(document).ready $(document).on('click','a',function () { }) // Need to put inside $(document).ready if placed inside  $('.container').on('click','a',function () { }); 

    MODIFICARE

    Dai commenti,

    1. $(document).ready non aspetta immagini o script. Questa è la grande differenza tra $(document).ready e $(document).load

    2. Solo il codice che accede al DOM dovrebbe essere in un gestore pronto. Se si tratta di un plug-in, non dovrebbe essere nell’evento pronto.

    risposte:

    jQuery’s .on () metodo: io uso il metodo .on () per AJAX un po ‘(creando dynamicmente elementi DOM). I gestori di clic .on () dovrebbero sempre essere all’interno di document.ready?

    No, non sempre. Se si carica il JS nella testata del documento, sarà necessario. Se si stanno creando gli elementi dopo il caricamento della pagina tramite AJAX, sarà necessario. Non sarà necessario se lo script è al di sotto dell’elemento html che stai aggiungendo anche a un gestore.

    Prestazioni: è più performante mantenere diversi javascript / oggetti jQuery all’interno o all’esterno di document.ready (inoltre, la differenza di prestazioni è significativa?)?

    Dipende. Ci vorrà lo stesso tempo per colbind i gestori, dipende solo se vuoi che accada immediatamente mentre la pagina si sta caricando o se vuoi che aspetti fino a quando non viene caricato l’intero documento. Quindi dipenderà dalle altre cose che stai facendo sulla pagina.

    Scopo dell’object: le pagine caricate con AJAX non possono accedere agli oggetti che si trovavano all’interno del documento della pagina precedente. Già, corretto? Possono accedere solo agli oggetti che erano al di fuori di document.ready (cioè oggetti veramente “globali”)?

    Essenzialmente è la sua funzione, quindi può accedere solo ai var dichiarati a livello globale (fuori / sopra tutte le funzioni) o con window.myvarname = '';

    Prima di poter usare tranquillamente jQuery è necessario assicurarsi che la pagina sia in uno stato in cui è pronta per essere manipolata. Con jQuery, facciamo ciò mettendo il nostro codice in una funzione, e quindi passando quella funzione a $(document).ready() . La funzione che passiamo può essere solo una funzione anonima .

     $(document).ready(function() { console.log('ready!'); }); 

    Questo eseguirà la funzione che passiamo a .ready () una volta che il documento è pronto. Cosa sta succedendo qui? Stiamo usando $ (documento) per creare un object jQuery dal documento della nostra pagina, e poi chiamando la funzione .ready () su quell’object, passandogli la funzione che vogliamo eseguire.

    Dato che questo è qualcosa che ti troverai a fare molto, c’è un metodo stenografico per questo se preferisci – la funzione $ () fa il doppio dovere come alias per $ (document) .ready () se passi una funzione:

     $(function() { console.log('ready!'); }); 

    Questa è una buona lettura: Jquery Fundamentals

    .ready () – Specifica una funzione da eseguire quando il DOM è completamente caricato.

     $(document).ready(function() { // Handler for .ready() called. }); 

    Ecco un elenco di tutti i metodi jQuery

    Continua a leggere Introduzione a $ (document) .ready ()

    Per essere realistico, document.ready non è necessario per nient’altro che manipolare il DOM con precisione e non è sempre necessario o l’opzione migliore. Quello che voglio dire è che quando sviluppi un grande jQuery plugin per esempio lo usi a fatica nel codice perché stai cercando di tenerlo ASCIUTTO, quindi ti astraggi il più ansible in metodi che manipolano il DOM ma sono fatti per essere invocati più tardi. Quando tutto il tuo codice è strettamente integrato, l’unico metodo esposto in document.ready solito è init cui avviene tutta la magia DOM. Spero che questo risponda alla tua domanda.

    È necessario associare tutte le azioni in document.ready, poiché è necessario attendere fino al completamento del caricamento del documento.

    Ma, dovresti creare funzioni per tutte le azioni e chiamarle dal documento.ready. Quando crei le funzioni (i tuoi oggetti globali), chiamale quando vuoi. Quindi, una volta caricati i nuovi dati e creati nuovi elementi, richiamare nuovamente tali funzioni.

    Queste funzioni sono quelle in cui hai associato eventi e azioni.

     $(document).ready(function(){ bindelement1(); bindelement2(); }); function bindelement1(){ $('el1').on('click',function...); //you might make an ajax call here, then under complete of the AJAX, call this function or any other function again } function bindelement2(){ $('el2').on('click',function...); } 

    Ho aggiunto un collegamento a un div e volevo eseguire alcune attività sul clic. Ho aggiunto il codice sotto l’elemento aggiunto nel DOM ma non ha funzionato. Ecco il codice:

       

    Non ha funzionato. Quindi ho inserito il codice jQuery in $ (document) .ready e ha funzionato perfettamente. Ecco qui.

     $(document).ready(function(e) { $("#advance-search #reset-adv-srch").on("click", function (){ alert('Link Clicked'); }); }); 

    L’evento pronto si verifica quando il DOM (modello object documento) è stato caricato.

    Poiché questo evento si verifica dopo che il documento è pronto, è un buon posto per avere tutti gli altri eventi e funzioni jQuery. Come nell’esempio sopra.

    Il metodo ready () specifica cosa succede quando si verifica un evento pronto.

    Suggerimento: il metodo ready () non dovrebbe essere usato insieme a.