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中处理

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

将一个实时事件绑定到所有页面/对话框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')因为这将搜索所有可能包含多个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在进入时都可用，您现在可以更轻松地调试语句和调试了！

Answer 2

我相信pageinit和pagecreate只在网页首次初始化并在DOM中创建时才被调用一次。

您可能需要查看pagechange事件http://jquerymobile.com/test/docs/api/events.html

Answer 3

您需要仔细阅读jQuery Mobile事件文档：http://jquerymobile.com/demos/1.1.0/docs/api/events.html

以上链接提供了一些很好的洞察力，了解每个事件何时触发，这里有一些来自页面的样本：

<强> pageinit

在初始化页面上触发，初始化后发生。   我们建议绑定到此事件而不是DOM ready（），因为这样   无论页面是直接加载还是加载，都可以使用   内容作为Ajax导航的一部分被拉入另一个页面   系统

<强> pageshow

转换动画后触发“toPage”   完成。此事件的回调将接收数据对象   他们的第二个arg。此数据对象具有以下属性：   prevPage（object）包含页面的jQuery集合对象   我们刚刚过渡的DOM元素。请注意这一点   在第一页转换期间，集合为空   应用程序启动。

要真正回答您的问题，请不要使用pageinit，请使用pageshow。 pageshow会在页面的初始显示时触发（在元素上触发pageinit事件之后），但也会在后续访问该页面时触发。

Answer 4

如果你想在每次加载页面之前调用某个函数，那么你可以使用pagebeforeshow，即

  $("#YourPageID").on('pagebeforeshow ', function() {
        //YourFunctionCall();
    });

以及您可以尝试使用页面ID绑定pageinit，但在DOM中插入页面时，页面init仅被调用一次。 http://jquerymobile.com/test/docs/api/events.html

  $("#YourPageID").on('pageinit', function() {
        //YourFunctionCall();
    });

Answer 5

检查此代码：

$( document ).delegate("#pageid", "pageinit", function() {  
    console.log('PAGEINIT');    
});

Answer 6

以下工作正常

<div data-role="page" id="signupForm">
    ...
    ...
<script type="text/javascript" src="test.js"></script>
</div>

test.js可能包含以下代码

// test.js starts here

$('#signupForm').on('pageinit', function(){
    // your code goes here
    ...
    ...

 });
// test.js ends here

在您的登录表单中，您可能有signupForm的链接， data-ajax =“false”应该包含在链接到signupForm的href标记中。

快乐编码

Kuppuram

Answer 7

如果是对此页面的ajax请求，则应将脚本写入正文，否则它根本无法为ajax工作。

<!DOCTYPE html>
<html>
  <head>
..........
  </head>
  <body>
    <div data-role="page" data-control-title="Detail" id="self_edit_page" data-theme="e">
...........
  </div>
  <script type="text/javascript" language="javascript" >
  $('#self_edit_page').bind("pagebeforeshow",function(event)
.......
  </script>
   </div>
  </body>
</html>

jQuery Mobile pageinit / pagecreate没有触发

7 个答案: