jquery - 在 jQuery Mobile 中执行 $(document).ready 的正确方法是什么？

Question

假设我想在 jQuery Mobile 完成 UI 渲染后运行一些代码。 mobileinit 事件不起作用，因为它是在发生这种情况之前引发的。快速的 Google 搜索似乎表明，仅使用 $(document).ready 不适用于 JQM；但我只是尝试了它(在 mobileinit 之后调用)并且它对我有用:我的代码运行并动态更新元素等，一切都很好。所以我想知道，是否有某种原因我不应该使用它(它不可靠或搞乱了 JQM)，或者是关于它不起作用的信息根本不准确？我错过了什么？

更新:请参阅 here进行演示。

Answer 1

您读到 $(document).ready 不适用于 jQuery Mobile 的原因很可能是因为它不会在您每次查看伪页面时触发。也就是说，它仍然会在加载 html 文档时触发。

如果您想运行每次查看伪页面时触发的代码，可以使用以下代码:

$('[data-role="page"]').live('pageshow', function () {
    //run your code here
});

注意:您还可以绑定(bind)其他 Hook (pageshow、pagehide、pagebefoershow、pagebeforehide)，可以在此处找到文档:http://jquerymobile.com/demos/1.0b1/docs/api/events.html

----------编辑----------

我正在考虑这一点，$(document).ready() 的最佳模拟不是绑定(bind)到“pageshow”事件，而是绑定(bind)到“pagecreate”事件。 $(document).ready() 在每次页面加载时触发一次，“pagecreate”对伪页面执行相同的操作，而“pageshow”在每次显示页面时触发。

因此，如果用户单击离开主屏幕，然后单击后退按钮返回主屏幕，则“pageshow”将在主屏幕的第二次(以及后续)“显示”时触发。

此外，“pageshow”要求用户导航到它所绑定(bind)的页面。