Das Verständnis von jQuery-Mobile-Seitenauslöseereignissen - warum Dialogseiten beim Schließen angezeigt werden

Question

Ich bin relativ neu bei jQuery-Mobile und versuche zu verstehen, was passiert, wenn eine Seite oder ein Dialog geladen wird.

Ich habe eine kleine Reihe von Dateien erstellt, um die Eigenartigkeit zu veranschaulichen, die ich sehe. Bitte siehe https://github.com/kanesee/jqm-event

Das einfache Beispiel hat nur eine Index-Seite, die Hallo Welt ausgibt. Es gibt eine Schaltfläche, die einen Dialog öffnet, indem eine andere Seite namens dialog.html geöffnet wird. Ich gebe aus, wann immer eine der Seiten ein pageshow- oder pagehide-Ereignis auslöst.

Dies ist die Abfolge der Aktionen.

1. Öffne index.html: (index's pageshow wird wie erwartet ausgelöst)
2. Klicke auf den Dialog-Link und der Dialog erscheint: (dann werden folgende Ereignisse ausgelöst: index pagehide, dialog pagehide, index pageshow, dialog pageshow)
3. Schließe den Dialog: (index pagehide, dialog pagehide, index pageshow, dialog pageshow)

Ich verstehe nicht, warum diese Abfolge ausgelöst wird, wenn der Dialog geöffnet wird. Ich verstehe index pagehide, da wir aus der Index-Seite herausgehen. Bin mir nicht sicher, warum anschließend dialog pagehide ausgelöst wird. Nicht sicher, warum index pageshow ausgelöst wird. Verstehe warum dialog pageshow zuletzt ausgelöst wird.

Ich verstehe auch nicht, warum die Abfolge während des Schließens des Dialogs ausgelöst wird. Bin mir nicht sicher, warum index pagehide ausgelöst wird. Ich verstehe, warum dialog pagehide ausgelöst wird und dann warum index pageshow ausgelöst wird. Bin mir nicht sicher, warum dialog pageshow am Ende erneut ausgelöst wird.

Wenn jemand erklären kann, warum diese eigenartige Abfolge von Ereignissen passiert, würde ich es zu schätzen wissen. Ich habe mir dieses Sequenzdiagramm angesehen, bin mir aber nicht sicher, ob ich es vollständig verstehe: http://bradbroulik.blogspot.co.nz/2011/12/jquery-mobile-events-diagram.html

Answer 1

Einfach weil pageshow und pagehide auf jeder Seite ausgelöst werden. In deinem Code hast du das Ereignis weder an index noch an Dialog weitergeleitet. Diese Ereignisse sind an das Dokument gebunden und werden also auf allen zukünftigen Seiten ausgelöst.

Wenn du das Folgende machst, wirst du den Unterschied bemerken.

$(document).on("pageshow", "#index", function () {
  console.log("Seite wird angezeigt");
});

Es wird nur auf der Indexseite (mit id="index") ausgelöst, wenn sie sichtbar ist.

---

Aktualisierung

In deinem Code hast du pageshow und pagehide nicht an bestimmte Seiten angehängt. Beide Ereignisse werden auf data-role="page" und data-role="dialog" ausgelöst, wenn sie entweder sichtbar oder verborgen sind.

In index.html hast du den folgenden Code.

$(document).on('pageshow', '#indexpage', function(event) {
  console.log('pageshow index.html');
});

$(document).on('pagehide', '#indexpage', function(event) {
  console.log('pagehide index.html');
});

Beim Start wird die Konsole folgendes ausgeben

pageshow index.html

Wenn du von index.html zu dialog.html (via Ajax) wechselst, wird die Konsole folgendes ausgeben

pagehide index.html

Aber bevor die Konsole pagehide index.html ausgibt, wird der folgende Code in dialog.html zusammen mit HTML geladen und ausgeführt.

$(document).on('pageshow', '#dialogPage', function(event) {
  console.log('pageshow dialog.html');
});

$(document).on('pagehide', '#dialogPage', function(event) {
  console.log('pagehide dialog.html');
});

Daher wird pagehide zweimal ausgelöst, wenn man von index.html zu dialog.html wechselt. Ebenso wird es zweimal ausgelöst, wenn man von dialog.html zurück zu index.html wechselt. In diesem Moment wird auch pageshow zweimal ausgelöst.

Die Konsole wird folgendes ausgeben:

1. Start

   pageshow index.html

2. Von index.html zu dialog.html

   pagehide index.html -> pagehide dialog.html -> pageshow index.html -> pageshow dialog.html

3. Von dialog.html zu index.html

   pagehide index.html -> pagehide dialog.html -> pageshow index.html -> pageshow dialog.html

Lösung:

Sei spezifisch beim Verwenden von pagebeforehide, pagebeforeshow, pagehide und pageshow Ereignissen

$(document).on("pageshow", "#pageID", function () {
  /* etwas machen */
});