javascript - jQueryMobile - Why is a new dynamically generated page not updated to the last version? -

I'm dynamically generating pages in jQueryMobile, but I do not understand that the new generation was generated Why the page has not been updated at the end of the edition.

This is a usage case:

Page A has a list of 'A' elements when I click one, the app redirects to a new page that is dynamically Is generated then I go back to page A. I click on the 'A' element, but from now on, the app will always be redirected to the first page that was dynamically generated.

Please see this Bela:

This is my code:

HTML

  & lt; Div data-role = "page" id = "home" & gt; & Lt; Div data-role = "header" data-condition = "fixed" & gt; & Lt; H1 & gt; Fixed page & lt; / H1> & Lt; / Div & gt; & Lt; Div data-role = "content" & gt; & Lt; A href = "#" data-roll = "button" id = "createfirst" & gt; Create a new page & lt; / A & gt; & Lt; Div data-role = "content" & gt; & Lt; A href = "#" data-roll = "button" id = "createanother" & gt; Create another new page & lt; / A & gt; & Lt; / Div & gt; & Lt; Div data-role = "footer" data-position = "fixed" & gt; & Lt; H1 & gt; Footer & lt; / H1> & Lt; / Div & gt; & Lt; / Div & gt;   
 jQueryMobile:  
  $ (document) .on ('click', 'a', function () {nameId = $ (this) .attr ('Id'); page = '& lt; div data-role = "page" id = "page" data-theme = "e" & gt; & lt; div data-role = "header" & gt; Lt; a data-left and lieutenant = "back" data-returns = "back" data-icon = "note" & gt; back  
 
 final ID was: '+ nameId +'  ; & Lt; div data-role = "content" & gt; cleric & lt; / h1 & g T. & Lt; / div & gt; & lt; / div & gt; '; / alert (nameId); This correct value prints $ .mobile.activePage.after (pages); $ .mobile.changePage (' # Pages', {transit: 'flip'});});   
 How can I solve this problem? I always need to show an updated version of the new page  
 Thanks in advance!  
 
 
 
 work example:  
 remove a new page before it was created must be given. In this case a   DOM   was filled with new pages, but the first one was still there and because they all had the same name which was the first priority.  
 In addition, when one click event bindings, do not bind it on only one tag, it was also a problem. Each time the return button was pressed   DOM    
 
 
 
  
  < P> $ (document) .on ('pageinit', '#home', function () {$ (document) .on ('click', '# createfirst, # createanother', function () {nameId = $ ( This is the (Data ID); alert (name id); page = '& lt; div data-role = "page" id = "page" data-theme = "e" & gt; & lt; div data-role = "Header" & lt; / a & gt; & lt; h1 & gt; dynamic & gt; a data-role = "button" href = "#" data-relay = "back" data-icon = "back" data -Iconos = "noticature"> back    gt; + nameId + '& lt; / div & gt; & lt; div data-role = "footer" data-position = "fixed"> gt; h1 & gt; ; Footer & lt; / h1 & gt; & lt; / div> & lt; / div & gt; '$ .mobile.activePage.after (page); $ .mobile.changePage (' # Page ', {Infection: 'flip'});});}); $ (Document) .on ('pagehide', '# page', function () {$ (this) .remove ();});   
 In this case, the   paged   event is bound to the dynamically-generated page. Because this document is bound to an object because it will also be done when the page is deleted. It states that from transition from the removal of page # pages from   jQuery mobile    
 As you can see that I have used to trigger jQuery mobile page events. Remove the page. If you want to know more about this subject then my other   Take a look at (my personal blog) or find it  .