jQuery Mobile pageinit/pagecreate不触发 [英] jQuery Mobile pageinit/pagecreate not firing

问题描述

我有5页-轻松地说:

• one.html
• two.html
• three.html
• four.html
• five.html

当我加载每个页面时，pageinit和pagecreate都正确触发.

When I load each individual page, both pageinit and pagecreate are firing correctly.

问题:

当我从one.html转到two.html时，pageinit和pagecreate都触发，但是当我回到one.html(从two.html)，pageinit和pagecreate时不要火.

When I go from one.html to two.html, pageinit and pagecreate both fire, BUT when I go back to one.html (from two.html), pageinit and pagecreate DO NOT fire.

这是为什么?如何始终在页面加载时触发pageinit和pagecreate，以及如何浏览每个页面?

Why is this and how can I always fire pageinit and pagecreate on page load, as well as navigating through each page?

更新:

对于每个页面，我都有:

For each page I have:

<div data-role="page" id="page-name">

 // content
</div>

为了测试事物触发时的顺序，我这样做:

To test the order at when things are firing I do:

$(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

How do I use the pagechange to always call the pageinit and pagecreate

推荐答案

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

You're checking for the wrong events, pageinit and pageshow are what you should be concerned about.

pageinit 会在每次首次加载页面时触发，jQM会将页面缓存在DOM/内存中，因此当您从two.html导航回one.html时，pageinit不会触发(它已经初始化了)

pageinit fires everytime a page is loaded for the first time, jQM caches pages in the DOM/memory so when you navigate back from two.html to one.html, pageinit won't fire (it's already initialized)

pageshow ，这是当您从two.html导航回one.html时需要寻找的东西

pageshow fires everytime a page is shown, this is what you need to be looking for when you navigate back from two.html to one.html

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

Together you can pull off a lot of clean code, use pageinit for initializing, configuration etc and update your DOM to the initial state. If you have dynamic data on the page that may change between views, handle it in pageshow

对于在生产环境中使用的大型网站，这是一个不错的设计:

Here's a good design for larger websites that we use in a production environment:

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

1. bind a live event to all pages/dialogs pageinit and pageshow events in some include that is on every page:

$(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或两者都存在，并将代码放在此处，然后每次创建/显示页面时都会触发此事件，它知道哪个页面触发了它，然后调用相应的代码

I reference each page with a name: <div data-role="page" data-mypage="employeelist"> In this live event you can basically have a switch statement for each page "name", and then check event.type for pageinit/pageshow or both and put your code there, then every time a page is created/shown this event will be fired, it knows what page triggered it and then calls the corresponding code

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

Now no matter what entry point a user lands on your site, all the handlers for all the pages are loaded. As you may already know, when you navigate to a page, it only pulls in <script/> within the div[data-role="page"] - ignoring any JS in the <head/>, placing separate JS on each page is a mess and should be avoided in any large site I believe

尽量不要在jQuery中使用覆盖选择器，例如$('div.myClass')，因为这将搜索您的所有DOM，其中可能包含多个jQM页面.幸运的是，在上述的pageinit/pageshow的实时事件处理程序中，this指向当前页面.在其中进行所有DOM搜索也是如此，例如$(this).find('div.myClass')这样可确保您仅在当前页面内获取元素. (当然，这不是id的问题). 在pageshow事件中请注意，您也可以使用$.mobile.activePage，但这在pageinit中不可用，所以我不使用它来保持一致性

Try not to use blanket selectors in your jQuery, e.g. $('div.myClass') since this will search all of your DOM which may have more than one jQM page in it. Luckily in the live event handler for pageinit/pageshow mentioned above, this refers to the current page. So do all DOM searches within it, e.g. $(this).find('div.myClass') this ensures you are only grabbing elements within the current page. (of course this isn't a concern for ids). Note in the pageshow event you can also use $.mobile.activePage, but this isn't available in the pageinit, so I don't use it for consistency

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

I eventually had too much code, so I built a handler object where each page's js is included in a separate js file and can register handlers with the live event

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

The drawback is that all your js for your entire site is loaded on the first page the user reaches, but minified even a large site is smaller than jQuery or jQM so this shouldn't be a concern. But if your site really is large I suppose you could look into RequireJS.

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

An advantage is you are no longer loading all your JS for each page through AJAX each time the user navigates to a new page. If all your JS is available on entry, you can now put debugger statements and debug much more easily!

这篇关于jQuery Mobile pageinit/pagecreate不触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！