jQuery - mehrere $ (Dokument). bereits…?

359

Frage:

$(document).readyWas passiert, wenn ich zwei JavaScript-Dateien mit Funktionen verknüpfe ? Überschreibt einer den anderen? Oder werden beide $(document).readyangerufen?

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, es ist die beste Vorgehensweise, beide Anrufe einfach zu einem einzigen zu kombinieren, $(document).readyaber in meiner Situation ist dies nicht ganz möglich.

javascript jquery rlb.usa
quelle
Mögliches Duplikat von Können Sie mehrere $ (document) .ready (function () {...}) haben? Abschnitte?
JohnOsborne

Antworten:

351

Alle werden ausgeführt und beim ersten Aufruf zuerst ausgeführt !!

<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, ersetzen sie sich nicht gegenseitig

Auch eine Sache möchte ich erwähnen

stattdessen

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

Sie können diese Verknüpfung verwenden

jQuery(function(){
   //dom ready codes
});
Praveen Prasad
quelle
66
oder noch kürzer $ (function () {// dom ready Codes}); api.jquery.com/ready
davehale23
217
Denken Sie daran, $ (function () {// do stuff}) zu sehen; zum ersten Mal und wie schwierig war es, die Erklärung zu googeln? $ (Dokument). kommuniziert bereits so viel mehr für so wenig ...
Matt Montag
56
Eine Abstimmung für einen knappen, weniger lesbaren Code ist eine Abstimmung für den Terrorismus.
FreeAsInBeer
10
Die Verknüpfungen bieten keinen Vorteil, verursachen jedoch eine Verschleierung. Wenn es Ihr Ziel ist, Ihren Code in Bezug auf die Zeit, die zum Lesen, Verstehen und Verwalten benötigt wird, "kürzer" zu machen, führen Sie diese Verknüpfungen auf lange Sicht.
Jononomo
3
Wenn die Verwendung von Verknüpfungen böse ist, sollte manjQuery(document).ready(function(){ });
Memet Olsen
76

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

Dies gilt unabhängig von der Syntax. Sie können verwendet werden jQuery(), jQuery(function() {}), $(document).ready(), was Sie wollen, ist das Verhalten gleich ist. Wenn ein früher fehlschlägt, werden nachfolgende Blöcke niemals ausgeführt.

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

cjastram
quelle
2
Diese. Ich habe gerade eine gute Stunde damit verbracht, ein Problem bis zu diesem Punkt einzugrenzen. Einer meiner $(document).readyAufrufe hat einen Fehler ausgelöst und daher wurde $(document).readynie eine andere Funktion aufgerufen. Es hat mich verrückt gemacht.
Scrollup
10
Dies ist nicht mehr der Fall. Ab jQuery 3.0 stellt jQuery sicher, dass eine in einem Handler auftretende Ausnahme die Ausführung später hinzugefügter Handler nicht verhindert. api.jquery.com/ready
Ravi Teja
32

$ (Dokument) .ready (); ist das gleiche wie jede andere Funktion. Es wird ausgelöst, sobald das Dokument fertig ist - dh geladen. Die Frage ist, was passiert, wenn mehrere $ (document) .ready () ausgelöst werden, nicht 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 die gleichen Ergebnisse erzielen. Letzteres läuft einen Bruchteil einer Sekunde schneller und erfordert weniger Eingabe. :) :)

abschließend, wo immer möglich, nur 1 $ (Dokument) verwenden .ready ();

// alte Antwort

Sie werden beide der Reihe nach angerufen. Die beste Vorgehensweise wäre, sie zu kombinieren. Aber mach dir keine Sorgen, wenn es nicht möglich ist. Die Seite wird nicht explodieren.

Ed Fryed
quelle
^^ Ich habe meine bearbeitet, da ich dachte, die Leute könnten verwirrt sein, wenn sie dieselbe Funktion mehrmals ausführen und verschiedene Funktionen in mehreren $ (document) .ready's ausführen. ^^ Ich hoffe, es hilft.
Ed Fryed
21

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

Wenn die Ausführungsreihenfolge wichtig ist, kombinieren Sie sie.

Diodeus - James MacFarlane
quelle
9

Beide werden angerufen, wer zuerst kommt, mahlt zuerst. Schauen Sie hier .

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

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

Ausgabe:

Document-ready 2 wurde aufgerufen!

Scoobler
quelle
2

Nicht um einen Thread zu nekrotisieren, sondern unter der neuesten Version jQueryder vorgeschlagenen Syntax ist:

$( handler )

Mit einer anonymen Funktion würde dies so aussehen

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

Siehe diesen Link:

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

Arlo Guthrie
quelle