Question

我使用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 for index。然后，我单击链接并切换到设置页面，将设置页面的所有元素添加到DOM，并触发设置的事件pageinit和pageshow。到目前为止还好。然后我回到索引页面。因为索引元素仍然在DOM中，只有pageshow事件被触发。然后我再次单击设置链接。设置元素也应该在DOM中，因此只有pageshow应该再次触发。但问题是每次更改页面时都会触发所有事件。所以问题是：为什么会有不同的事件？我应该在哪里放置文本框的填充或按钮单击的触发器？

Answer 1

DOM准备好后会触发“pageinit”。这个是有用的当你想在页面下载时初始化变量时。
“pagebeforeshow”在您的页面显示之前触发。你
当您需要在显示之前执行操作时，可以使用此事件，
比如添加div或HTML结构。
显示页面时会触发“pageshow”。我用这个添加点击事件和其他事件的事件。

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

pageinit和pageshow之间的差异

1 个答案: