jquery - pageinit 和 pageshow 之间的区别

Question

我使用 jQuery Mobile 1.2 创建了一个简单的 Web 应用程序。该应用程序由主页index.html 和名为settings.html 的第二页组成。主页的标题部分包含一个用于打开设置页面的按钮:

<div data-role="header">
    <h1>Main</h1>
    <a href="settings.html">Settings</a>
</div><!-- /header -->

在设置对话框中，用户应该能够更改程序选项。为此，我实现了一个函数来在每次对话框打开时设置当前选项:

$(document).on("pageinit", "#page-settings", function() {
    // numeric text field to change the year of date (settings is an array)
    $("#text-year").val(settings.year);
    ...
});

到目前为止，效果正确。

现在我读到还有一些事件，例如“pagebeforeshow”和“pageshow”。但我不明白这些事件之间的区别。我测试了触发器如下:

$(document).on("pageinit", "#page-settings", function() {
    alert("pageinit");
});
$(document).on("pagebeforeshow", "#page-settings", function() {
    alert("pagebeforeshow");
});
$(document).on("pageshow", "#page-settings", function() {
    alert("pageshow");
});

如果我单击主页上的按钮，那么所有三个事件都会触发，并且所有警报都会显示。那么为什么会出现不同的事件呢？我应该在我的设置场景中使用哪一个？

我认为流程如下:我第一次进入索引页面，该页面上的所有元素都被添加到 DOM 中，然后触发索引的 pageinit 和 pageshow 事件。然后我单击链接并切换到设置页面，设置页面的所有元素都添加到 DOM 中，并且触发设置的 pageinit 和 pageshow 事件。到目前为止还好。然后我回到索引页。因为索引元素仍在 DOM 中，所以只有 pageshow 事件正在触发。然后我再次单击设置链接。设置元素也应该在 DOM 中，因此只有 pageshow 应该再次触发。但问题是每次我更改页面时都会触发所有事件。所以问题是:为什么会出现不同的事件？我应该在哪里放置文本框的填充或按钮点击的触发器？

Answer 1

• “pageinit”在 DOM 准备就绪时触发。这个很有用当您想在下载页面时初始化变量时。

• “pagebeforeshow”在页面显示之前触发。你
  当您需要在显示之前执行操作时可以使用此事件，
  例如添加 div 或 HTML 结构。

• “pageshow”在页面显示时触发。我用这个添加我的点击事件和其他事件的事件。

您可以在文档中找到有关事件的更多信息: http://api.jquerymobile.com/category/events/