我使用jQuery Mobile 1.2创建了一个简单的webapp。该应用程序由一个主页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事件。然后，我再次单击设置链接。 settings元素也应该在DOM中，因此只有pageshow应该再次触发。
但是问题在于，每次更改页面时都会触发所有事件。所以问题是：为什么会有不同的事件？我应该在哪里填充文本框或单击按钮的触发器？
最佳答案
DOM准备就绪时，将触发“ pageinit”。这是有用的
当您要下载页面时要初始化变量时。
在显示页面之前触发“ pagebeforeshow”。您
需要在显示之前执行某项操作时可以使用此事件，
例如添加div或HTML结构。
显示页面时触发“ pageshow”。我用这个
添加我的点击事件和其他事件的事件。
您可以在文档中找到有关事件的更多信息：
http://api.jquerymobile.com/category/events/