jQuery Mobile 1.4 Update

Der ursprüngliche Artikel war für die alte Art der Seitenverarbeitung gedacht, die vor jQuery Mobile 1.4 verwendet wurde. Dieser alte Weg ist jetzt veraltet und bleibt bis jQuery Mobile 1.5 (einschließlich) aktiv, was bedeutet, dass Sie alles, was unten erwähnt wird, noch mindestens bis zum nächsten Jahr und jQuery Mobile 1.6 verwenden können.

Alte Ereignisse, einschließlich pageinit existieren nicht mehr und wurden durch das Widget pagecontainer ersetzt. Pageinit wird vollständig gelöscht, und Sie können stattdessen pagecreate verwenden, was unverändert bleibt.

Wenn Sie an der neuen Art der Handhabung von Seitenereignissen interessiert sind, lesen Sie dieser Artikel. Ansonsten lesen Sie diesen Artikel gerne weiter, da er mehr als nur Seitenereignisse abdeckt und möglicherweise wertvolle Informationen liefert.

Ältere Inhalte

Diesen Artikel finden Sie auch als Teil meines Blogs HIER.

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

Wenn Sie jQuery zum ersten Mal lernen, lernen Sie, Code innerhalb der Funktion $(document).ready() aufzurufen, damit alles ausgeführt wird, sobald die DOM ist geladen. In jQuery Mobile wird jedoch Ajax verwendet, um den Inhalt jeder Seite beim Navigieren in das DOM zu laden, was bedeutet, dass $(document).ready() ausgelöst wird, bevor Ihre erste Seite geladen wird. Folglich wird jeder Code, der zur Seitenmanipulation gedacht ist, nach einer Seitenaktualisierung ausgeführt, was zu subtilen Fehlern führen kann. Auf einigen Systemen scheint es einwandfrei zu funktionieren, auf anderen kann es jedoch zu unregelmäßigem und schwer wiederholbarem Verhalten kommen.

Klassische jQuery-Syntax:

$(document).ready(function() {

});

Um dieses Problem zu lösen (was in der Tat ein Problem darstellt), haben jQuery Mobile-Entwickler Seitenereignisse erstellt. Kurz gesagt handelt es sich bei Seitenereignissen um Ereignisse, die an bestimmten Punkten der Seitenausführung ausgelöst werden. Ein solches Seitenereignis ist pageinit, das wir wie folgt verwenden können:

$(document).on('pageinit', function() {

});

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

<div data-role="page">

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

$('#index').on('pageinit', function() {

});

Das pageinit-Ereignis wird jedes Mal ausgeführt, wenn die Seite geladen und zum ersten Mal angezeigt werden soll. Es wird nicht erneut ausgelöst, es sei denn, die Seite wird manuell aktualisiert oder das Laden von Ajax-Seiten ist 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 veranschaulichen: http://jsfiddle. net/Gajotres/Q3Usv/

Noch ein paar Anmerkungen zu dieser Frage. Unabhängig davon, ob Sie 1 HTML mit mehreren Seiten oder das Paradigma mit mehreren HTML-Dateien verwenden, wird empfohlen, die gesamte Handhabung Ihrer benutzerdefinierten JavaScript-Seiten in einer einzigen separaten JavaScript-Datei aufzuteilen. Dadurch wird Ihr Code nicht besser, aber es bietet eine viel bessere Codeübersicht, insbesondere beim Erstellen einer jQuery Mobile-Anwendung.

Es gibt auch ein weiteres spezielles jQuery Mobile-Event namens mobileinit. Wenn jQuery Mobile startet, löst es ein mobileinit-Ereignis für das Dokumentobjekt aus. Um die Standardeinstellungen zu überschreiben, binden Sie sie an mobileinit. Ein gutes Beispiel für die Verwendung von mobileinit ist das Deaktivieren des Ladens von Ajax-Seiten oder das Ändern des Standardverhaltens des Ajax-Ladeprogramms.

$(document).ready(function() {

});

Übergangsreihenfolge für Seitenereignisse

Eine Liste aller Seitenereignisse finden Sie hier: http://api.jquerymobile.com/category/events/

Let's Nehmen wir an, wir haben eine Seite A und eine Seite B; Dies ist die Entlade-/Ladereihenfolge:

1. Seite B – Ereignis pagebeforecreate
2. Seite B – Ereignis pagecreate
3. Seite B – Ereignis pageinit
4. Seite A - Ereignis pagebeforehide
5. Seite A - Ereignis pageremove
6. Seite A - Ereignis pagehide
7. Seite B - Ereignis pagebeforeshow
8. Seite B – Ereignis pageshow

Für ein besseres Verständnis der Seitenereignisse lesen Sie Folgendes:

• Seite vor dem Laden, Seite laden,

Das obige ist der detaillierte Inhalt vonjQuery Mobile: „$(document).ready()' vs. „$(document).on('pageinit')' – Was soll ich verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!