jquery mobile - Possible to ajax load only the <page/> instead of everything of an HTML document? -

i need to

1. on page a, when clicking link page b, ajax injects of b, not refreshing whole page
2. now on page b, pressing reload button refreshes whole page, js being run
3. the js must not loaded more once

---

method x) standard way, satisfies 1,2 not 3. alert seen after clicking link page b.

a.html <before_page>   <script>alert('abc')</script> </before_page> <page>   <a href=b.html>b</a> </page> <after_page/> 

-

b.html <before_page>   <script>alert('abc')</script> </before_page> <page/> <after_page/> 

---

method y) satisfies 1,3 not 2.

a.html <before_page>   <script>alert('abc')</script> </before_page> <page>   <a href=c.html>c</a> </page> <after_page/> 

-

c.html <!--nothing before <page/> --> <page/> <!-- nothing after <page/>  --> 

---

the question is how satisfy 1,2,3?

easy option satisfy scenarios cache external pages , place code inside each page's div. there 2 ways cache pages, either using data attribute each page, or enable globally.

• data attribute:

  <div data-role="page" data-cache-dom="true" id="pageid">   <!-- js code / libraries --> </div> 

• globally

  <script src="jquery.js"></script> <script>   $(document).on("mobileinit", function () {     $.mobile.page.prototype.options.domcache = true;  }); </script> <script src="jquery-mobile.js"></script> 

another option in case don't want cache pages, preferable place js libraries, code , style sheets in head of each , every page. loaded once only. external pages removed once hidden, placing code in page div load same code again , again.

$(document).on("pagecreate", "#pageid", function () {   $(".selector").on("event", function () {     /* code */   }); }); 

demo