jQuery Mobile pageinit/pagecreate不触发

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

 // content
</div>

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

你正在检查错误的事件，pageinit和pageshow是你应该关心的。

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

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

您可以一起脱掉大量干净的代码，使用pageinit进行初始化，配置等，并将DOM更新到初始状态。如果页面上有动态数据可能会在视图之间更改，请以页面显示方式处理

以下是我们在生产环境中使用的较大网站的良好设计：

将live事件绑定到所有页面/对话框pageinit和pageshow事件在某些包括在每个页面上：

$(document).on(‘pageinit pageshow’，’div：jqmData(role =“page”)，div：jqmData(role =“dialog”)’，function(event)
>我引用每个页面的名称：< div data-role =“page”data-mypage =“employeelist”>
在这个现场活动中，您可以为每个页面“name”基本上都有一个switch语句，然后检查pageinit / pageshow或both两者的event.type，并将代码放在那里，然后每次创建/显示该页面时，此事件将被触发，它知道什么页面触发它，然后调用相应的代码
>现在，无论使用者登陆您的网站是什么入口点，所有页面的所有处理程序都会被加载。您可能已经知道，当您浏览到一个页面时，它只会拉入< script />在div [data-role =“page”] – 忽略< head />中的任何JS，在每个页面上放置单独的JS是一个混乱，应该避免在任何大的网站我相信
>尽量不要在你的jQuery中使用毯子选择器，例如$(‘div.myClass’)，因为这将搜索可能在其中有多个jQM页面的所有DOM。幸运的是在上面提到的pageinit / pageshow的live事件处理程序中，这是指当前页面。因此，在其中进行所有DOM搜索，例如$(this).find(‘div.myClass’)这样可以确保您只在当前页面中抓取元素。 (当然这不是ids的关注)。注意在pageshow事件中你也可以使用$ .mobile.activePage，但是这在pageinit中是不可用的，所以我不使用它来保持一致性

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

缺点是，您的整个站点的所有js都会在用户访问的第一页上加载，但是即使是一个大型站点，也会缩小到比jQuery或jQM小，因此这不应该是一个问题。但是如果你的网站真的很大，我想你可以看看requireJS。

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