javascript - 了解 jQuery-Mobile 页面触发事件 - 为什么对话框页面在关闭时显示

Question

我是 jQuery-Mobile 的新手，我想了解加载页面或对话框时发生了什么。

我创建了一小组文件来说明我所看到的怪事。请看https://github.com/kanesee/jqm-event

这个简单的例子只有一个打印 Hello World 的索引页。有一个按钮可以打开一个对话框，方法是打开另一个名为 dialog.html 的页面。每当任一页面触发 pageshow 或 pagehide 事件时，我都会打印出来。

这是 Action 的顺序。

1. 打开 index.html:(索引的 pageshow 按预期触发)
2. 点击对话框链接，弹出对话框:(然后触发此事件序列:索引页面隐藏、对话框页面隐藏、索引页面显示、对话框页面显示)
3. 关闭对话框:(索引页面隐藏、对话框页面隐藏、索引页面显示、对话框页面显示)

我不明白为什么当对话框打开时，该序列会触发。我理解索引页隐藏，因为我们要从索引页中转换出来。不确定为什么接下来会触发对话框的页面隐藏。不知道为什么索引的 pageshow 会触发。我明白为什么对话框的 pageshow 最后触发。

我也不明白为什么序列会在对话框关闭时触发。不知道为什么索引的 pagehide 会触发。我明白为什么对话框 pagehide 会触发，然后索引 pageshow 会触发。不确定为什么对话框 pageshow 最后会再次触发。

如果有人能帮助解释这一系列奇怪的事件，我将不胜感激。我看过这个序列图，但我不确定我是否完全理解它:http://bradbroulik.blogspot.co.nz/2011/12/jquery-mobile-events-diagram.html

Answer 1

因为 pageshow 和 pagehide 会在任何页面上触发。在您的代码中，您没有将事件委托(delegate)给索引或对话框。这些事件绑定(bind)到文档，因此将在接下来的所有页面上触发。

如果您执行以下操作，您会注意到不同之处。

$(document).on("pageshow", "#index", function () {
  console.log("Page is shown");
});

它只会在索引页(带有 id="index")可见时触发。

---

更新

在您的代码中，您没有将 pageshow 和 pagehide 附加到特定页面。当 data-role="page" 和 data-role="dialog" 可见或隐藏时，这两个事件都会触发。

在 index.html 中，您有以下代码。

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

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

启动时会打印控制台日志

pageshow index.html

当您从 index.html 移动到 dialog.html(通过 Ajax)时，将打印控制台日志

pagehide index.html

但在控制台日志打印pagehide index.html之前，dialog.html 中的以下代码与 HTML 一起加载到 DOM 中并执行。

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

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

因此，当从 index.html 移动到 dialog.html 时，pagehide 将触发两次。此外，当从 dialog.html 移回 index.html 时，它会触发两次。此时，pageshow 也会触发两次。

控制台日志将打印以下内容:

1. 启动

   pageshow index.html

2. 从 index.html 到 dialog.html

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

3. 从 dialog.html 到 index.html

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

解决方案:

在使用 pagebeforehide、pagebeforeshow、pagehide 和 pageshow 事件时要具体

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