18

我有 5 页 - 为方便起见，可以说：

  • 一个.html
  • 二.html
  • 三.html
  • 四.html
  • 五.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 始终调用pageinitandpagecreate

4

7 回答 7

27

您正在检查错误的事件，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 语句，然后检查 event.type 的 pageinit/pageshow 或两者，并将您的代码放在那里，然后每次页面created/shown 这个事件将被触发，它知道是哪个页面触发了它，然后调用相应的代码

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

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


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

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

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

于 2012-05-10T22:04:52.783 回答
3

我相信pageinit并且pagecreate都只在页面第一次初始化和在 DOM 中创建时分别调用一次。

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

于 2012-05-10T16:54:30.400 回答
1

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

上面的链接可以很好地了解每个事件何时触发，以下是页面中的几个示例：

页面初始化

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

.

页面显示

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

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

于 2012-05-10T20:12:47.683 回答
0

If you want to call some function each time before loading a page then you can use pagebeforeshow i.e. 

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

as well as you can try binding your pageinit with page id but page init is called only once while inserting your page in DOM. http://jquerymobile.com/test/docs/api/events.html

  $("#YourPageID").on('pageinit', function() {
        //YourFunctionCall();
    });
于 2012-05-10T20:06:27.920 回答
0

检查此代码：

$( document ).delegate("#pageid", "pageinit", function() {  
    console.log('PAGEINIT');    
});
于 2012-05-11T09:11:58.530 回答
0

以下工作正常

<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 标记中。

快乐编码

库普拉姆

于 2013-04-20T02:11:25.810 回答
0

If it is an ajax request to this page, the script should be written into body or else it doen't work at all for 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>
于 2014-06-20T08:37:13.793 回答