我使用 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 应该再次触发。 但问题是每次我更改页面时都会触发所有事件。所以问题是:为什么会出现不同的事件?我应该在哪里放置文本框的填充或按钮点击的触发器?
最佳答案
“pageinit”在 DOM 准备就绪时触发。这个很有用 当您想在下载页面时初始化变量时。
“pagebeforeshow”在页面显示之前触发。你
当您需要在显示之前执行操作时可以使用此事件,
例如添加 div 或 HTML 结构。“pageshow”在页面显示时触发。我用这个 添加我的点击事件和其他事件的事件。
您可以在文档中找到有关事件的更多信息: http://api.jquerymobile.com/category/events/
关于jquery - pageinit 和 pageshow 之间的区别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15534198/