Unterschied zwischen $ (document) .ready und $ (document) .on ('paginit')

8

Ich benutze jquery mobile und möchte diesen Code reproduzieren:

%Vor%

es zeigt den Spinner an, bis ich beschließe, ihn in anderen Funktionen zu verstecken

%Vor%

Jetzt sehe ich, dass document.ready () in jquery mobile 1.2 veraltet ist, also schlagen sie vor, es durch $(document).on('pageinit')

zu ersetzen

Aber wenn ich meinen Code durch den vorgeschlagenen Code ersetze, blendet der Spinner automatisch aus ... warum? Dies ist der neue Code:

%Vor%     
user1903894 14.12.2012, 11:48
quelle

4 Antworten

7

Siehe auch:

Dieser Artikel kann auch als Teil meines Blogs HIER gefunden werden .

Lösung

Zuerst müssen Sie alle jQM-Seitenereignisse und deren Ablauf verstehen.

%Vor%

ist in der Tat ein Ersatz für:

%Vor%

aber die jQM-Seite besteht aus wenigen Phasen. Um in Ihrem Fall einen Spinner anzeigen zu können, müssen Sie das pageshow-Ereignis verwenden. Die Seite muss angezeigt werden, um den Spinner anzeigen zu können. Ich habe ein Beispiel für Sie erstellt: Ссылка . Gehe darauf zur nächsten Seite, um einen Spinner zu sehen. Sie können pageshow auch durch pageInit ersetzen, um einen Unterschied zu sehen.

Sie sollten diesen Code verwenden:

%Vor%

Aber auch das ist kein richtiger Weg, der beste jQM Weg ist es, diese Syntax zu verwenden:

%Vor%

Oder wenn Sie es an eine einzelne Seite binden möchten, verwenden Sie dies:

%Vor%

Wo pageID eine ID Ihrer Seite ist.

$ (Dokument) .on ('pageinit') vs $ (Dokument) .ready ()

Das erste, was Sie in jQuery lernen, ist das Aufrufen von Code innerhalb der $ (document) .ready () -Funktion, sodass alles ausgeführt wird, sobald das DOM geladen ist . In jQuery Mobile wird jedoch Ajax verwendet, um den Inhalt jeder Seite während der Navigation in das DOM zu laden. Aus diesem Grund wird $ (document) .ready () ausgelöst, bevor die erste Seite geladen wird, und jeder Code, der für die Seitenbearbeitung vorgesehen ist, wird nach einer Seitenaktualisierung ausgeführt. Dies kann ein sehr subtiler Fehler sein. Auf einigen Systemen scheint es, dass es gut funktioniert, aber auf anderen Systemen kann es zu unberechenbaren, schwer zu wiederholenden Seltsamkeiten kommen.

Klassische jQuery-Syntax:

%Vor%

Um dieses Problem zu lösen (und mir zu vertrauen, dass dies ein Problem ist), haben Entwickler von jQuery Mobile Seitenereignisse erstellt. Kurz gesagt, Seitenereignisse sind Ereignisse, die an einem bestimmten Punkt der Seitenausführung ausgelöst werden. Eines dieser Seitenereignisse ist ein pageinit -Ereignis und wir können es wie folgt verwenden:

%Vor%

Wir können noch weiter gehen und eine Seiten-ID anstelle der Dokumentenauswahl verwenden. Nehmen wir an, wir haben eine jQuery Mobile-Seite mit einer ID index :

%Vor%

Um einen Code auszuführen, der nur für die Indexseite verfügbar ist, könnten wir folgende Syntax verwenden:

%Vor% Das

PageInit -Ereignis wird jedes Mal ausgeführt, wenn die Seite geladen und zum ersten Mal angezeigt wird. Es wird nicht erneut ausgelöst, es sei denn, die Seite wird manuell aktualisiert oder das Laden von Ajax-Seiten wird deaktiviert. Wenn Sie möchten, dass Code jedes Mal ausgeführt wird, wenn Sie eine Seite besuchen, ist es besser, das Ereignis pagebeforeshow zu verwenden.

Hier ist ein funktionierendes Beispiel: Ссылка , um dieses Problem zu demonstrieren.

Noch ein paar Anmerkungen zu dieser Frage. Egal, ob Sie 1 HTML-Mehrseiten oder mehrere HTML-Dateien Paradigma verwenden, ist es ratsam, alle Ihre benutzerdefinierten JavaScript-Seitenbehandlung in eine einzige separate js-Datei zu trennen. Dadurch wird Ihr Code zwar besser, Sie haben jedoch eine wesentlich bessere Codeübersicht, insbesondere beim Erstellen einer jQuery Mobile -Anwendung.

Es gibt auch noch ein spezielles jQuery Mobile -Ereignis, das mobileinit heißt. Wenn jQuery Mobile gestartet wird, löst es mobileinit Ereignis für das Dokumentobjekt. Um die Standardeinstellungen zu überschreiben, binden Sie sie an mobileinit . Eines der besten Beispiele für die Verwendung von mobileinit ist das Deaktivieren des Ladens von AJAX-Seiten oder das Ändern des Verhaltens von Standard-AJAX-Ladeprogrammen.

%Vor%     
Gajotres 14.12.2012 16:20
quelle
3

Das

%Vor% Die

-Methode ist für jquery mobile, um nach einem dynamischen Laden der Seite auszulösen.

%Vor%

verhält sich nicht wie

%Vor%

, weil es beim Laden der Seite nur einmal ausgelöst wird.

    
Licson 14.12.2012 12:12
quelle
1

Versuchen Sie

für Show

%Vor%

zum Verstecken

%Vor%

Sie müssen den Kreisel ausblenden, wenn Sie den Inhalt dynamisch anfügen

überprüfen Sie dies

    
Rohan Patil 14.12.2012 11:53
quelle
1

pagininit wird nicht verwendet, wenn eine dynamische Seitenladung auftritt. Das ist nicht der Fall. Der Grund dafür ist, dass document.ready () nur einmal aufgerufen wird. Das heißt, wenn Sie mehrere Seiten haben, auf denen Sie etwas tun möchten, wenn es fertig ist, können Sie das nicht tun.

document.ready () funktioniert also nur einmal, aber paginiert immer dann, wenn eine Seite initialisiert wird.

    
Miz 14.12.2012 15:35
quelle