Wann sollte ich die document.ready-Funktion von jQuery verwenden?

107

Mir wurde gesagt, ich solle document verwenden. Schon als ich anfing, Javascript / jQuery zu verwenden, habe ich nie wirklich gelernt, warum.

Könnte jemand einige grundlegende Richtlinien geben, wann es sinnvoll ist, Javascript / JQuery-Code in jQuery's zu verpacken document.ready?

Einige Themen, die mich interessieren:

jQuerys .on()Methode: Ich verwende die .on()Methode für AJAX ziemlich oft (normalerweise für dynamisch erstellte DOM-Elemente). Sollte der .on()Klick - Handler immer seine innen document.ready ?
Leistung: Ist es leistungsfähiger, verschiedene Javascript / jQuery-Objekte innerhalb oder außerhalb des Dokuments bereit zu halten (ist auch der Leistungsunterschied signifikant?)?
Objektbereich: AJAX-geladene Seiten können nicht auf Objekte zugreifen, die sich im Dokument der vorherigen Seite befanden. Bereits richtig? Sie können nur auf Objekte zugreifen, die sich außerhalb von document.ready befanden (dh wirklich "globale" Objekte)?

Update: Um einer bewährten Methode zu folgen, befindet sich mein gesamtes Javascript (die jQuery-Bibliothek und der Code meiner App) am Ende meiner HTML-Seite und ich verwende das deferAttribut für die jQuery-haltigen Skripte auf meinen AJAX-geladenen Seiten, damit ich kann auf diesen Seiten auf die jQuery-Bibliothek zugreifen.

javascript jquery dom event-handling document-ready tim peterson
quelle

2

Denn wenn das DOM nicht bereit ist, erhalten Sie möglicherweise unerwartete Ergebnisse.

Robert Harvey

1

2.- Nun, ich benutze außerhalb nur zum Debuggen und kann einige var / function per Konsole

aufrufen

@ RobertHarvey Was für "unerwartete" Ergebnisse? Können Sie ein Beispiel geben?

Tim Peterson

3

Sie versuchen, ein Element oder Attribut zu ändern, das es noch nicht in das DOM geschafft hat.

Robert Harvey

143

In einfachen Worten,

$(document).readyist ein Ereignis, das ausgelöst wird, wenn documentes fertig ist.

Angenommen, Sie haben Ihren jQuery-Code in einen headAbschnitt eingefügt und versucht, auf ein domElement (einen Anker, ein Bild usw.) zuzugreifen. Sie können nicht darauf zugreifen, da er htmlvon oben nach unten interpretiert wird und Ihre HTML-Elemente nicht vorhanden sind, wenn Ihr jQuery-Code vorhanden ist läuft.

Um dieses Problem zu lösen, platzieren wir jeden jQuery / Javascript-Code (der DOM verwendet) in der $(document).readyFunktion, die aufgerufen wird, wenn auf alle domElemente zugegriffen werden kann.

Und aus diesem Grund ist es nicht erforderlich , wenn Sie Ihren jQuery-Code unten platzieren (nach allen dom-Elementen kurz zuvor </body>)$(document).ready

Es ist nicht erforderlich, die onMethode $(document).readynur dann zu platzieren , wenn Sie die onMethode documentaus demselben Grund verwenden, den ich oben erläutert habe.

    //No need to be put inside $(document).ready
    $(document).on('click','a',function () {
    })

    // Need to be put inside $(document).ready if placed inside <head></head>
    $('.container').on('click','a',function () {
    });

BEARBEITEN

Aus Kommentaren,

$(document).readywartet nicht auf Bilder oder Skripte. Das ist der große Unterschied zwischen $(document).readyund$(document).load
Nur Code, der auf das DOM zugreift, sollte im Ready-Handler sein. Wenn es sich um ein Plugin handelt, sollte es nicht bereit sein.

Jashwant
quelle

@ Dipaks Ja, warum nicht? Wir sind nur sehr daran gewöhnt $(document).ready. Sehen Sie dies

Jashwant

Solange Sie jQuery in das laden headund Sie Skripte sind, nachdem die Elemente bearbeitet wurden, document.readywird dies nicht benötigt. Bilder sind jedoch ein Sonderfall ...

elclanrs

@elclanrs Siehe meine aktualisierte Frage. Ich lade jQuery am Ende meiner HTML-Seite mit meinem app-spezifischen Code direkt danach.

Tim Peterson

@Jashwant wie wäre es mit Leistungsunterschieden von dom.ready vs. nicht? Sind die relevant?

Tim Peterson

1

Wir geben nicht den gesamten jQueryCode in den Ready-Handler ein. Nur Code, der auf das DOM zugreift. Wenn es ein Plugin ist, sollte es nicht in der ready Veranstaltung sein

Juan Mendes

7

Antworten:

.on () -Methode von jQuery: Ich verwende die .on () -Methode für AJAX ziemlich oft (dynamisches Erstellen von DOM-Elementen). Sollten sich die .on () -Klick-Handler immer in document.ready befinden?

Nein nicht immer. Wenn Sie Ihr JS in den Dokumentenkopf laden, müssen Sie. Wenn Sie die Elemente erstellen, nachdem die Seite über AJAX geladen wurde, müssen Sie dies tun. Wenn sich das Skript unter dem HTML-Element befindet, müssen Sie auch keinen Handler hinzufügen.

Leistung: Ist es leistungsfähiger, verschiedene Javascript / jQuery-Objekte innerhalb oder außerhalb des Dokuments bereit zu halten (ist auch der Leistungsunterschied signifikant?)?

Es hängt davon ab, ob. Das Anhängen der Handler dauert genauso lange. Es hängt nur davon ab, ob dies beim Laden der Seite sofort geschehen soll oder ob gewartet werden soll, bis das gesamte Dokument geladen ist. Es hängt also davon ab, welche anderen Dinge Sie auf der Seite tun.

Objektbereich: AJAX-geladene Seiten können nicht auf Objekte zugreifen, die sich im Dokument der vorherigen Seite befanden. Bereits richtig? Sie können nur auf Objekte zugreifen, die sich außerhalb von document.ready befanden (dh wirklich "globale" Objekte)?

Es handelt sich im Wesentlichen um eine eigene Funktion, sodass nur auf Variablen zugegriffen werden kann, die in einem globalen Bereich (außerhalb / vor allem Funktionen) oder mit deklariert wurden window.myvarname = '';

Justin
quelle

6

Bevor Sie jQuery sicher verwenden können, müssen Sie sicherstellen, dass sich die Seite in einem Zustand befindet, in dem sie bearbeitet werden kann. Mit jQuery erreichen wir dies, indem wir unseren Code in eine Funktion einfügen und diese Funktion dann an übergeben $(document).ready(). Die Funktion, die wir übergeben, kann nur eine anonyme Funktion sein .

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

Dadurch wird die Funktion ausgeführt, die wir an .ready () übergeben, sobald das Dokument fertig ist. Was ist denn hier los? Wir verwenden $ (document), um ein jQuery-Objekt aus dem Dokument unserer Seite zu erstellen, und rufen dann die Funktion .ready () für dieses Objekt auf und übergeben ihm die Funktion, die wir ausführen möchten.

Da dies etwas ist, das Sie häufig tun, gibt es eine Kurzmethode dafür, wenn Sie es vorziehen - die Funktion $ () erfüllt die doppelte Aufgabe als Alias für $ (document) .ready (), wenn Sie ihr eine Funktion übergeben:

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

Dies ist eine gute Lektüre: Jquery Fundamentals

Tom Sarduy
quelle

3

Nicht zu verwechseln mit dem, (function($){ })(jQuery);was Ihren Code so umschließt, dass $ jQuery in diesem Abschluss ist

John Magnolia

3

.ready () - Geben Sie eine Funktion an, die ausgeführt werden soll, wenn das DOM vollständig geladen ist.

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

Hier ist eine Liste aller jQuery-Methoden

Lesen Sie weiter Einführung in $ (document) .ready ()

Dipak
quelle

3

Um realistisch zu sein, document.readywird nichts anderes benötigt, als das DOM genau zu manipulieren, und es wird nicht immer benötigt oder ist die beste Option. Ich meine, wenn Sie beispielsweise ein großes jQuery-Plugin entwickeln, verwenden Sie es kaum im gesamten Code, weil Sie versuchen, es trocken zu halten. Sie abstrahieren also so viel wie möglich in Methoden, die das DOM manipulieren, aber aufgerufen werden sollen später. Wenn Ihr gesamter Code eng integriert ist, ist die einzige Methode, die verfügbar gemacht wird, document.readynormalerweise die, initin der die gesamte DOM-Magie stattfindet. Hoffe das beantwortet deine Frage.

elclanrs
quelle

0

Sie sollten alle Aktionen in document.ready binden, da Sie warten sollten, bis das Dokument vollständig geladen ist.

Sie sollten jedoch Funktionen für alle Aktionen erstellen und diese aus dem document.ready heraus aufrufen. Wenn Sie Funktionen (Ihre globalen Objekte) erstellen, rufen Sie diese auf, wann immer Sie möchten. Rufen Sie diese Funktionen erneut auf, sobald Ihre neuen Daten geladen und neue Elemente erstellt wurden.

In diesen Funktionen haben Sie die Ereignisse und Aktionselemente gebunden.

$(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...);
}

Pulkit Mittal
quelle

0

Ich habe einen Link zu einem Div angehängt und wollte einige Aufgaben mit dem Klick erledigen. Ich habe den Code unter dem angehängten Element im DOM hinzugefügt, aber es hat nicht funktioniert. Hier ist der Code:

<div id="advance-search">
   Some other DOM elements
   <!-- Here I wanted to apppend the link as <a href="javascript:;" id="reset-adv-srch"><span class="bold">x</span> Clear all</a>-->
</div>

<script>
  $("#advance-search #reset-adv-srch").on("click", function (){
     alert('Link Clicked');``
  });
</script>

Es hat nicht funktioniert. Dann habe ich den jQuery-Code in $ (document) .ready eingefügt und es hat perfekt funktioniert. Hier ist es.

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

Sicherer Ahmed
quelle

-2

Das Bereitschaftsereignis tritt auf, wenn das DOM (Dokumentobjektmodell) geladen wurde.

Da dieses Ereignis auftritt, nachdem das Dokument fertig ist, ist es ein guter Ort, um alle anderen jQuery-Ereignisse und -Funktionen zu haben. Wie im obigen Beispiel.

Die ready () -Methode gibt an, was passiert, wenn ein ready-Ereignis auftritt.

Tipp: Die ready () -Methode sollte nicht zusammen mit verwendet werden.

Shrikant Shiledar
quelle