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

问题描述

我有 5 页 - 为方便起见，让我们说:

• one.html
• two.html
• 三.html
• four.html
• 五.html

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

问题:

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

为什么会这样，我怎样才能在页面加载时触发 pageinit 和 pagecreate 以及浏览每个页面?

更新:

对于我拥有的每一页:

//内容

为了在事情发生时测试订单，我会这样做:

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

解决方案

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

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

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

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

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

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

I have 5 pages - for ease lets say:

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

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

The Problem:

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.

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

Update:

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');
});

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

解决方案

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

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

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. 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){

2. 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

3. 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

4. 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

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

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.

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屋！