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 ，以及浏览每个页面？

更新：

对于我有的每个页面：

 
 // content  

为了测试事情发生时的顺序我做：

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

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

1. 将一个实时事件绑定到所有页面/对话框pageinit和每个页面上的某些包含的pageshow事件：

   $(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){

2. 我引用每个页面的名称：

   在这个直播活动中，您基本上可以为每个页面“名称”设置一个switch语句，然后检查event.type为pageinit / pageshow或两者并将你的代码放在那里，然后每次创建/显示页面时都会触发此事件，它知道触发它的页面然后调用相应的代码

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

4. 尽量不要在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

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

您可能需要查看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 ie

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

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

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

Answer 5

以下工作正常

 
 ... ...   

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 6

检查此代码：

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

Answer 7

如果它是对此页面的ajax请求，则应将脚本写入正文，否则它根本不能用于ajax。

    ..........   
 ...........