jQuery Mobile pageinit/pagecreate 未触发

jQuery Mobile pageinit/pagecreate not firing

提问by cusejuice

I have 5 pages - for ease lets say:

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

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

• 一个.html
• 二.html
• 三.html
• 四.html
• 五.html

When I load each individual page, both pageinitand pagecreateare firing correctly.

当我打开每一个单独页面，都pageinit和pagecreate正确射击。

The Problem:

问题：

When I go from one.html to two.html, pageinitand pagecreateboth fire, BUT when I go back to one.html (from two.html), pageinitand pagecreateDO NOT fire.

当我从one.html去two.html，pageinit和pagecreate两个火，但是当我回到one.html（从two.html），pageinit以及pagecreate不火。

Why is this and how can I always fire pageinitand pagecreateon page load, as well as navigating through each page?

这是为什么，我怎么可以随时开火pageinit，并pagecreate在页面加载，以及通过每个页面导航？

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

如何使用 pagechange 始终调用pageinit和pagecreate

回答by Clarence Liu

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

您正在检查错误的事件，pageinit 和 pageshow 是您应该关注的。

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

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

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

每次显示页面时都会触发pageshow，这是您从 two.html 导航回 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

你可以一起完成大量干净的代码，使用 pageinit 进行初始化、配置等并将你的 DOM 更新到初始状态。如果页面上的动态数据可能在视图之间发生变化，请在 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, thisrefers 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

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 并将您的代码放在那里，然后每次页面是created/shown 这个事件会被触发，它知道是哪个页面触发了它然后调用相应的代码

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

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

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 都包含在一个单独的 js 文件中，并且可以使用实时事件注册处理程序

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.

缺点是整个站点的所有 js 都加载在用户到达的第一个页面上，但即使是大型站点也比 jQuery 或 jQM 小，因此这应该不是问题。但是如果你的网站真的很大，我想你可以看看 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!

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

回答by Chase

I believe pageinitand pagecreateare both only called once when the page is first initialized and created in the DOM, respectively.

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

You may want to look into the pagechangeevent http://jquerymobile.com/test/docs/api/events.html

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

回答by Jasper

You require a thourough read of the jQuery Mobile event documentation: http://jquerymobile.com/demos/1.1.0/docs/api/events.html

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

The above links gives some great insight into when each of the events fire, here are a couple samples from the page:

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

pageinit

Triggered on the page being initialized, after initialization occurs. We recommend binding to this event instead of DOM ready() because this will work regardless of whether the page is loaded directly or if the content is pulled into another page as part of the Ajax navigation system.

页面初始化

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

.

.

pageshow

Triggered on the "toPage" after the transition animation has completed. Callbacks for this event will recieve a data object as their 2nd arg. This data object has the following properties on it: prevPage (object) A jQuery collection object that contains the page DOM element that we just transitioned away from. Note that this collection is empty when the first page is transitioned in during application startup.

页面展示

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

To actually answer your question, don't use pageinit, use pageshow. pageshowfires on the initial showing of a page (just after the pageinitevent is fired on the element) but also on subsequent visits to the page.

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

回答by Tanveer

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

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

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

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

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

回答by stay_hungry

Check this code:

检查此代码：

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

回答by Kuppuram

The following works fine

以下工作正常

<div data-role="page" id="signupForm">
    ...
    ...
<script type="text/javascript" src="test.js"></script>
</div>

test.js may contain the following code

test.js 可能包含以下代码

// test.js starts here

$('#signupForm').on('pageinit', function(){
    // your code goes here
    ...
    ...

 });
// test.js ends here

In your login form, you may have link for signupForm and data-ajax="false"should be included in href tag that links to signupForm.

在您的登录表单中，您可能有 signupForm 的链接，并且data-ajax="false"应该包含在链接到 signupForm 的 href 标签中。

Happy Coding

快乐编码

Kuppuram

库普兰

回答by Hymanhoo

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.

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