【问题标题】:jQuery Mobile ChangePage alternativejQuery Mobile ChangePage 替代方案
【发布时间】:2025-04-16 21:05:01
【问题描述】:

有没有办法在 jQuery Mobile 中更改页面但仍有 $(document).ready 函数启动?我在调用 $.mobile.changePage 时似乎遇到了一些问题,因为我的页面并不总是完全加载......

或者不是寻找changePage的替代品,有没有办法在页面被changePage加载到DOM后刷新页面??

【问题讨论】:

标签: jquery-mobile


【解决方案1】:

这个答案是错误且无用的,所以这是一个真正可以帮助人们的答案...... - 贾斯珀

文档:http://jquerymobile.com/demos/1.1.1/docs/api/methods.html

具体来说,您正在寻找 reloadPage 选项:

reloadPageboolean,默认值:false)强制重新加载页面,即使它已经在页面容器的 DOM 中。仅当使用 changePage() 的 'to' 参数是一个 URL。

所以,这样的事情会起作用:

$.mobile.changePage('/some/url.html', {
    reloadPage : true
});

您还可以绑定到特定伪页面的 pageinit 事件,以便专门为这些伪页面运行代码:

$(document).delegate('#page-1', 'pageinit', function () {
    //run code for #page-1 pseudo-page
}).delegate('#page-2', 'pageinit', function () {
    //run code for #page-2 pseudo-page
}).delegate('#page-3', 'pageinit', function () {
    //run code for #page-3 pseudo-page
});

然后我建议将整个站点的所有代码放在一个 .js 中,并将其包含在每个文档的任何 data-role="page" 或 data-role="dialog" 元素中或之外.这样,无论用户如何登陆或浏览网站,您网站的代码都将始终存在。

【讨论】:

  • @Jaspar 我可以创建一个 JSFiddel 的效果,但我从个人经验知道 document.ready 在 $.mobile.changePage() 之后被触发。
  • 我设置了一个快速示例,显示在 jQuery Mobile 网站(版本 1.1.1)中逐页导航时触发的事件:apexeleven.com/*/document-ready。您会注意到在初始页面加载后不会触发 ready 事件。
【解决方案2】:

在 jQuery Mobile 中,ajax 用于在您导航时将每个页面的内容加载到 DOM 中,并且 DOM 就绪处理程序(即所有使用 $(document).ready() 绑定的事件)仅针对第一页执行。要在页面显示时执行特定事件,您可以尝试将其放在特定页面上,

$(document)
  .unbind("pageshow.somenamespace")
  .bind("pageshow.somenamespace", 
    function() {
      // code here
    }
  );

【讨论】: