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!