Question

我对jQuery-Mobile比较陌生，我试图了解页面或对话框加载时发生了什么。

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

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

这是一系列行动。

打开index.html :(索引的页面显示会按预期触发）
单击对话框链接并弹出对话框:(然后此事件序列触发：索引页面隐藏，对话框页面隐藏，索引页面显示，对话框页面显示）
关闭对话框:(索引页面隐藏，对话框页面隐藏，索引页面显示，对话框页面显示）

我不明白为什么当对话框打开时，该序列会触发。我理解索引页面隐藏，因为我们正在从索引页面转换出来。不知道为什么对话框的Pagehide会在下一次触发。不确定为什么索引的页面显示会触发。我理解为什么对话框的页面显示最后会发生。

我也不明白为什么序列会在关闭对话框时触发。不确定为什么索引的Pagehide会发生火灾。我理解为什么对话框页面隐藏会触发，然后为什么索引页面显示会触发。不确定为什么对话框页面显示会在最后再次触发。

如果有人能帮助解释这些奇怪的事件序列，我会很感激。我已经查看了这个序列图，但我不确定我是否完全理解它：http://bradbroulik.blogspot.co.nz/2011/12/jquery-mobile-events-diagram.html

Answer 1

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

如果你这样做，你会发现差异。

$(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也将发射两次。

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

起动

pageshow index.html
从index.html到dialog.html

pagehide index.html - ＆gt; pagehide dialog.html - ＆gt; pageshow index.html - ＆gt; pageshow dialog.html
从dialog.html到index.html

pagehide index.html - ＆gt; pagehide dialog.html - ＆gt; pageshow index.html - ＆gt; pageshow dialog.html

解决方案：

在使用pagebeforehide，pagebeforeshow，pagehide和pageshow事件时具体说明

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

了解jQuery-Mobile页面触发事件 - 关闭时对话框页面显示的原因

1 个答案:

更新

解决方案：