jQuery Mobile pageinit/pagecreate没有触发

Question

我有5页 - 为了方便我们说:

• one.html
• two.html
• three.html
• four.html
• five.html

当我打开每一个单独页面,都pageinit和pagecreate正确射击.

问题:

当我从one.html转到two.html,pageinit并且pagecreate两个都开火,但是当我回到one.html(来自two.html),pageinit并且pagecreate不要开火.

为什么这样,我怎么能一直开火pageinit和pagecreate页面加载,以及浏览每个页面？

更新:

对于我拥有的每个页面:

<div data-role="page" id="page-name">

 // content
</div>

为了测试事情发生时的顺序我做:

$(document).on('pagecreate','[data-role=page]', function(){
  console.log('PAGECREATE');
});
$(document).on('pageinit','[data-role=page]', function(){
  console.log('PAGEINIT');
});
$(document).on('pagebeforeshow','[data-role=page]', function(){
  console.log('PAGEBEFORESHOW');
});
$(document).on('pageshow','[data-role=page]', function(){
  console.log('PAGESHOW');
});

如何使用pagechange始终调用pageinit和pagecreate

Answer 1

您正在检查错误的事件,pageinit和pageshow是您应该关注的.

pageinit每次首次加载页面时都会触发,jQM会在DOM /内存中缓存页面,所以当你从two.html导航回one.html时,pageinit将不会触发(它已经初始化)

每次显示页面时都会触发pageshow,当您从two.html导航回one.html时,这是您需要查找的内容

您可以一起使用pageinit进行初始化,配置等,并将DOM更新为初始状态.如果页面上的动态数据可能在视图之间发生变化,请在pageshow中处理

这是我们在生产环境中使用的大型网站的优秀设计:

1. 将一个实时事件绑定到所有页面/对话框pageinit和每个页面上的某些包含的pageshow事件:

   $(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){

2. 我用一个名字引用每个页面:<div data-role="page" data-mypage="employeelist"> 在这个直播活动中你基本上可以为每个页面"名称"设置一个switch语句,然后检查pageinit/pageshow或两者的event.type并将你的代码放在那里,然后每次页面都是创建/显示此事件将被触发,它知道触发它的页面然后调用相应的代码

3. 现在,无论用户登陆您的站点,都会加载所有页面的所有处理程序.正如您可能已经知道的那样,当您导航到一个页面时,它只会在<script/>div [data-role ="page"]中拉入 - 忽略任何JS,<head/>在每个页面上放置单独的JS是一团糟,应该避免在我相信任何大型网站

4. 尽量不要在jQuery中使用毯子选择器,例如,$('div.myClass')因为这将搜索所有可能包含多个jQM页面的DOM.幸运的是,在上面提到的pageinit/pageshow的实时事件处理程序中,this指的是当前页面.所以在其中进行所有DOM搜索,例如,$(this).find('div.myClass')这确保您只抓取当前页面中的元素.(当然这不是ids的问题).在pageshow事件中你也可以使用$.mobile.activePage,但是这在pageinit中不可用,所以我不使用它来保持一致性

我最终有太多的代码,所以我构建了一个处理程序对象,其中每个页面的js都包含在一个单独的js文件中,并且可以使用live事件注册处理程序

缺点是整个站点的所有j都加载到用户到达的第一页上,但即使大型站点小于jQuery或jQM也会缩小,所以这不应该是一个问题.但是如果你的网站真的很大,我想你可以看看RequireJS.

一个优点是,每次用户导航到新页面时,您不再通过AJAX为每个页面加载所有JS.如果您的所有JS在进入时都可用,您现在可以更轻松地放置调试器语句和调试!