jQuery Mobile pageinit/pagecreate 未触发答案

【问题标题】：jQuery Mobile pageinit/pagecreate not firingjQuery Mobile pageinit/pagecreate 未触发
【发布时间】：2012-05-10 16:48:04
【问题描述】：

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

one.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 始终调用 pageinit 和 pagecreate

【问题讨论】：

onBack 不会触发，因为您的页面位于 DOM 中。尝试在 jQuery mobile 中禁用 ajax。或者，如果好，而不是 5 个不同的页面，请为此尝试 data-role = page。它的工作原理与您正在寻找的相同。

标签： jquery jquery-mobile

【解决方案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 语句，然后检查 event.type 的 pageinit/pageshow 或两者并把您的代码放在那里，然后每次创建/显示页面时都会触发此事件，它知道是哪个页面触发了它，然后调用相应的代码
现在，无论用户进入您网站的哪个入口点，所有页面的所有处理程序都会被加载。您可能已经知道，当您导航到一个页面时，它只会拉入 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 文件中，并且可以使用实时事件注册处理程序

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

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

【讨论】：

pagecreate 几乎可以和pageinit 一样使用。区别在于pagecreate 在小部件开始初始化之前触发，pageinit 在之后触发。关于事件的文档页面顶部有一个大的黄色块来解释这一点：jquerymobile.com/demos/1.1.0/docs/api/events.html。另请注意，如果您想在每次显示伪页面时都执行某些操作，您可以绑定到 pageshow 事件，因为它会在 pageinit 之后触发以及随后的页面查看。
但是 jquery 说 pageinit 已被弃用，不应使用！！ api.jquerymobile.com/pageinit 它说：... 注意：此事件在 1.4.0 中已被弃用，以支持 pagecreate。只需替换上面示例中的 pageinit 即可。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您需要彻底阅读 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 事件之后），但也会在后续访问页面时触发。

【讨论】：

【解决方案4】：

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

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

您也可以尝试将 pageinit 与页面 id 绑定，但在将页面插入 DOM 时仅调用一次页面初始化。 http://jquerymobile.com/test/docs/api/events.html

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

【讨论】：

请注意，.live() 已被贬值，因此请小心使用它，因为它可能会在某些时候从 jQuery Core 中消失：api.jquery.com/live
+1 感谢 Jasper .on 是 .live() 的替代品，我已经测试了 .on() 的工作正常

【解决方案5】：

以下工作正常

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

快乐编码

库普兰

【讨论】：

【解决方案6】：

检查此代码：

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

【讨论】：

【解决方案7】：

如果是这个页面的ajax请求，脚本应该写到body中，否则对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>

【讨论】：

需要更多解释