jquery - jQuery Mobile pageinit/pagecreate不触发

我有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

最佳答案

您正在检查错误的事件，应该关注pageinit和pageshow。

pageinit每次第一次加载页面时都会触发，jQM会在DOM /内存中缓存页面，因此当您从two.html导航回到one.html时，pageinit不会触发（它已经初始化）

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

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

这是我们在生产环境中使用的大型网站的不错设计：

将实时事件绑定到所有页面/对话框的pageinit和pageshow事件，其中包括每个页面上的某些事件：

$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){
我用以下名称引用每个页面：<div data-role="page" data-mypage="employeelist">
在此实时事件中，您基本上可以为每个页面“名称”包含一个switch语句，然后检查pageinit / pageshow或两者的event.type并将代码放在此处，然后每次创建/显示页面时都会触发此事件，它知道哪个页面触发了它，然后调用相应的代码
现在，无论用户在您的站点上进入哪个入口点，所有页面的所有处理程序都将加载。您可能已经知道，当您导航到页面时，它只会在div [data-role =“ page”]中拉入<script/>-忽略<head/>中的任何JS，在每个页面上放置单独的JS是我认为在任何大型网站中都应避免混乱
尽量不要在jQuery中使用覆盖选择器，例如$('div.myClass')，因为这将搜索您的所有DOM，其中可能包含多个jQM页面。幸运的是，在上述的pageinit / pageshow的实时事件处理程序中，this引用当前页面。在其中进行所有DOM搜索也是如此，例如$(this).find('div.myClass')这样可确保您仅在当前页面内获取元素。（当然，这与id无关）。请注意，在pageshow事件中，您也可以使用$.mobile.activePage，但这在pageinit中不可用，因此为了保持一致性，我不使用它

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

缺点是整个站点的所有js都加载在用户访问的第一页上，但是即使是大型站点也要缩小到比jQuery或jQM小的大小，因此不必担心。但是，如果您的站点确实很大，我想您可以研究RequireJS。

优点是您不再需要在用户每次导航到新页面时都通过AJAX为每个页面加载所有JS。如果您可以在入门时使用所有JS，则现在可以放置调试器语句并更轻松地进行调试！

PageInit

jquery - jQuery Mobile pageinit/pagecreate不触发