jQuery - mehrere $(document).ready ...?

Question

Frage:

Wenn ich zwei JavaScript-Dateien einbinde, beide mit $(document).ready Funktionen, was passiert? Überschreibt die eine die andere? Oder werden beide $(document).ready angerufen werden?

Zum Beispiel,

<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!");
});

Ich bin sicher, dass es am besten ist, beide Aufrufe in einem einzigen Aufruf zu kombinieren $(document).ready aber in meiner Situation ist das nicht ganz möglich.

Answer 1

Alle werden hingerichtet und auf First-Called-First-Run-Basis!!

<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 Wie Sie sehen können, ersetzen sie sich nicht gegenseitig

Auch eine Sache möchte ich erwähnen

anstelle von diesem

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

können Sie diese Abkürzung verwenden

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

Answer 2

Es ist wichtig zu beachten, dass jeder jQuery() Aufruf muss tatsächlich zurückkehren. Wenn bei einem Aufruf eine Ausnahme ausgelöst wird, werden nachfolgende (nicht verwandte) Aufrufe nie ausgeführt.

Dies gilt unabhängig von der Syntax. Sie können verwenden jQuery() , jQuery(function() {}) , $(document).ready() was auch immer Sie wollen, das Verhalten ist das gleiche. Wenn ein früher Block fehlschlägt, werden die nachfolgenden Blöcke nie ausgeführt.

Dies war für mich ein Problem bei der Verwendung von Bibliotheken von Drittanbietern. Eine Bibliothek warf eine Ausnahme, und nachfolgende Bibliotheken nie etwas initialisiert.

Answer 3

$(document).ready(); ist die gleiche Funktion wie jede andere. Sie wird ausgelöst, sobald das Dokument bereit ist, d.h. geladen wurde. Die Frage bezieht sich darauf, was passiert, wenn mehrere $(document).ready() ausgelöst werden, nicht darauf, was passiert, wenn Sie dieselbe Funktion innerhalb mehrerer $(document).ready() auslösen.

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

});

beide verhalten sich genau gleich. der einzige unterschied besteht darin, dass erstere zwar die gleichen ergebnisse erzielt, letztere aber einen Bruchteil einer sekunde schneller läuft und weniger tipparbeit erfordert. :)

Zusammenfassend lässt sich sagen, dass möglichst nur 1 $(document).ready() verwendet werden sollte;

//alte Antwort

Sie werden beide der Reihe nach aufgerufen. Am besten wäre es, sie zu kombinieren. aber keine Sorge, wenn es nicht möglich ist. die Seite wird nicht explodieren.

Answer 4

Die Ausführung erfolgt von oben nach unten. Wer zuerst kommt, mahlt zuerst.

Wenn die Reihenfolge der Ausführung wichtig ist, kombinieren Sie sie.

Answer 5

Beide werden aufgerufen, wer zuerst kommt, mahlt zuerst. Schauen Sie mal aquí .

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

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

Ausgabe:

Dokument-fertig 2 wurde aufgerufen!