jQuery - più $ (documento). già ...?

359

Domanda:

Se collego due file JavaScript, entrambi con $(document).readyfunzioni, cosa succede? Uno sovrascrive l'altro? O entrambi $(document).readyvengono chiamati?

Per esempio,

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript" src="http://.../jquery1.js"></script>

<script type="text/javascript" src="http://.../jquery2.js"></script>

jquery1.js:

$(document).ready(function(){
    $("#page-title").html("Document-ready was called!");
});

jquery2.js:

$(document).ready(function(){
    $("#page-subtitle").html("Document-ready was called!");
});

Sono sicuro che è buona prassi combinare semplicemente entrambe le chiamate in un singolo, $(document).readyma non è del tutto possibile nella mia situazione.

javascript jquery

— rlb.usa
fonte

Possibile duplicato di Can you have multiple $ (document) .ready (function () {...}); sezioni?

— JohnOsborne,

352

Tutto verrà eseguito e in base alla prima chiamata Prima esecuzione chiamata !!

<div id="target"></div>

<script>
  $(document).ready(function(){
    jQuery('#target').append('target edit 1<br>');
  });
  $(document).ready(function(){
    jQuery('#target').append('target edit 2<br>');
  });
  $(document).ready(function(){
    jQuery('#target').append('target edit 3<br>');
  });
</script>

Demo Come puoi vedere, non si sostituiscono l'un l'altro

Anche una cosa che vorrei menzionare

al posto di questo

$(document).ready(function(){});

puoi usare questa scorciatoia

jQuery(function(){
   //dom ready codes
});

— Praveen Prasad
fonte

66

o anche $ (function () {// dom ready codes} più breve); api.jquery.com/ready

— davehale23,

217

Ricorda di vedere $ (function () {// do stuff}); per la prima volta, e quanto è stata difficile per Google la spiegazione? $ (documento). Comunica già molto di più per così poco ...

— Matt Montag,

56

Un voto per codice conciso e meno leggibile è un voto per terrorismo.

— FreeAsInBeer,

10

Le scorciatoie non offrono alcun vantaggio, ma causano offuscamento. Se il tuo obiettivo è quello di rendere il tuo codice "più breve" in termini di tempo necessario per leggere, comprendere e mantenere, queste scorciatoie ti porteranno molto avanti.

— jononomo,

3

se usare scorciatoie è male, si dovrebbe usarejQuery(document).ready(function(){ });

— Memet Olsen,

76

È importante notare che ogni jQuery()chiamata deve effettivamente tornare. Se viene generata un'eccezione in una, le chiamate successive (non correlate) non verranno mai eseguite.

Questo vale indipendentemente dalla sintassi. È possibile utilizzare jQuery(), jQuery(function() {}), $(document).ready(), quello che vuoi, il comportamento è lo stesso. Se uno precedente fallisce, i blocchi successivi non verranno mai eseguiti.

Questo è stato un problema per me quando ho usato librerie di terze parti. Una libreria stava generando un'eccezione e le librerie successive non iniziarono mai nulla.

— cjastram
fonte

2

Questo. Ho appena trascorso un'ora buona restringendo un problema fino a questo punto. Una delle mie $(document).readychiamate ha generato un errore e quindi una $(document).readyfunzione diversa non è mai stata chiamata. Mi stava facendo impazzire.

— scrollup

10

Questo non è più il caso. A partire da jQuery 3.0, jQuery garantisce che si verifichi un'eccezione in un gestore che non impedisce l'esecuzione di gestori aggiunti successivamente. api.jquery.com/ready

— Ravi Teja,

32

$ (Document) .ready (); è uguale a qualsiasi altra funzione. si attiva quando il documento è pronto, ovvero caricato. la domanda riguarda cosa succede quando vengono attivati più $ (document) .ready () non quando si attiva la stessa funzione all'interno di più $ (document) .ready ()

//this
<div id="target"></div>

$(document).ready(function(){
   jQuery('#target').append('target edit 1<br>');
});
$(document).ready(function(){
   jQuery('#target').append('target edit 2<br>');
});
$(document).ready(function(){
   jQuery('#target').append('target edit 3<br>');
});

//is the same as
<div id="target"></div>

$(document).ready(function(){

    jQuery('#target').append('target edit 1<br>');

    jQuery('#target').append('target edit 2<br>');

    jQuery('#target').append('target edit 3<br>');

});

entrambi si comporteranno esattamente allo stesso modo. l'unica differenza è che sebbene il primo raggiungerà gli stessi risultati. quest'ultimo eseguirà una frazione di secondo più veloce e richiede meno battiture. :)

in conclusione, ove possibile, utilizzare solo 1 $ (document) .ready ();

// vecchia risposta

Entrambi verranno chiamati in ordine. La migliore pratica sarebbe quella di combinarli. ma non preoccuparti se non è possibile. la pagina non esploderà.

— Ed Fryed
fonte

^^ ho modificato il mio perché pensavo che le persone potessero confondersi tra l'esecuzione della stessa funzione più volte e l'esecuzione di funzioni diverse in più $ (documento). Già. ^^ spero che sia d'aiuto.

— Ed Fryed,

21

L'esecuzione è dall'alto verso il basso. Primo arrivato, primo servito.

Se la sequenza di esecuzione è importante, combinali.

— Diodeus - James MacFarlane
fonte

10

Entrambi verranno chiamati, primo arrivato, primo servito. Dai un'occhiata qui .

$(document).ready(function(){
    $("#page-title").html("Document-ready was called!");
  });

$(document).ready(function(){
    $("#page-title").html("Document-ready 2 was called!");
  });

Produzione:

È stato chiamato Document-ready 2!

— Scoobler
fonte

2

Non per necro un thread, ma nell'ultima versione della jQuerysintassi suggerita è:

$( handler )

Usando una funzione anonima, questo sarebbe simile

$(function() { ... insert code here ... });

Vedi questo link:

https://api.jquery.com/ready/

— Arlo Guthrie
fonte