仅在新建页面时运行某些内容，而不是在从其他页面返回时运行

Question

Demo

pagecreate事件有一些与ajax加载一起使用，我不明白。

问题在于多页来回转换的事件触发。

// only on page a
$(document).on("pagecreate", function (e) {
  alert('on pagecreate\n' +   $(e.target).attr('id') )
});
// only on page a, ends

// each page
page a is <div data-role="page" id="page-a">
page b is <div data-role="page" id="page-b">
page c is <div data-role="page" id="page-c">

-

1. p) Load a         ->  alert a        (expected)  
   q) a  go to    b  ->  alert b        (expected)  
   r) b  back to  a  ->  no alert on a  (good)

2. s) Load a         ->  alert a        (expected)  
   t) a  go to    b  ->  alert b        (expected)  
   u) b  go to    c  ->  alert c        (expected)  
   v) c  back to  b  ->  alert b        (unexpected)  
   w) b  back to  a  ->  no alert on a  (strange)

---

奇怪？

v）很奇怪：为什么r）不警报但v）呢？

w）甚至更奇怪：为什么v）警报但w）没有？

---

问题 - 如何执行以下操作？

3. (Here in 3., you type in the URL of a only once. 
   NO refresh/F5 key in the whole process)
   .
   Load a         ->  alert a  
   a  go to    b  ->  alert b  
   b  go to    c  ->  alert c  
   .  
   c  back to  b  ->  no alert  
   b  back to  a  ->  no alert  
   .  
   a  go to    b  ->  alert b  
   b  back to  a  ->  no alert  
   .  
   a  go to    b  ->  alert b  
   b  go to    c  ->  alert c  
   c  go to    d  ->  alert d  
   .  
   d  back to  c  ->  no alert  
   c  back to  b  ->  no alert  

即，仅在页面新制作时发出警报。回去永远不会警告。

Answer 1

更新

如果您只想在向前导航中运行代码，请收听pagecontainerbeforechange或pagecontainerbeforetransition并从options对象检索导航方向。

我会使用beforetransition，因为它会在导航时触发一次，而不像beforechange会发射两次。

如果options.direction未返回back，请按以下方式运行您的代码。

$(document).on("pagecontainerbeforetransition", function (e, data) {
  if ( typeof data.options.direction != "undefined" && data.options.direction != "back" ) {
     $(document).one("pagecontainershow", function (e, data) {
       alert(data.toPage[0].id);
     });
   }
});

我只使用一次pagecontainershow来显示警报。用它来运行你想要的任何功能。

---

因为您使用的是单页模型，所以每个页面div都在一个单独的文件中。 SPM中jQuery Mobile的默认行为是，一旦您离开它们，就会从DOM中删除外部页面。页面“a”是登录页面，它被缓存并且永远不会删除。

从“a”导航到“b”时，您会在“b”中收到提醒。当您从“b”导航到“c”时，“b”将从DOM中删除，并且“c”将被加载并创建。你也有警报。当您从“c”导航回“b”时，删除“c”并加载并创建“b”。导航回“a”不会重新加载它，因为它已缓存（登录页面）。

如果您希望外部网页保留在DOM中，请将它们像this answer一样缓存到您最近的一个问题中。

或者为每个外部页面div 指定一个唯一ID，并pagecreate一次.one()运行。

$(document).one("pagecreate", "#pageB", function (e) {
  alert("created: " + this.id);
});