Running something only when a page is newly made, not when going back from another page

问题

Demo

There is something about the pagecreate event, used with ajax loading, which I do not understand.

The problem is on event firing on multi-page back-and-forth transitions.

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

---

Strange?

v) is strange: why r) does not alert but v) does?

w) is even stranger: why v) alerts but w) does not?

---

The Question - How to do the following?

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  

That is, alert only when a page is newly made. Going back never alerts.

回答1:

Update

If you want to run code only in forward navigation listen to either pagecontainerbeforechange or pagecontainerbeforetransition and retrieve navigation direction from options object.

I will use beforetransition because it fires once upon navigating, unlike beforechange which fires twice.

If options.direction doesn't return back, run your code as follows.

$(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);
     });
   }
});

I used pagecontainershow one time only to show alert. Use it to run any function you want.

---

Because you are using a Single Page Model, each page div is in a separate file. The default behavior of jQuery Mobile in SPM is that external page are removed from DOM once you navigate away off them. Page "a" is landing page, it is cached and never removed.

When navigate from "a" to "b" you get an alert in "b". When you navigate from "b" to "c", "b" is removed from DOM and "c" is loaded and created. You got an alert there too. When you navigate back to "b" from "c", "c" is removed and "b" is loaded and created. Navigating back to "a" doesn't reload it because it is cached (landing page).

If you want external pages to remain in DOM, cache them as in this answer to one of your recent questions.

Or give each external page div a unique ID and run pagecreate one time .one().

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

来源：https://stackoverflow.com/questions/27297772/running-something-only-when-a-page-is-newly-made-not-when-going-back-from-anoth