title: jQuery (IBM Worklight) page navigation and back button
body: <p>I am developing an app using IBM Worklight with jQuery libs. Structure of the app is</p>
  
  <p>Login.html --> Menu.html --></p>
  
  <ul>
  <li>Menu1 --> Menu1.html -->(on button click)--> Detail.html -->(save)address.html</li>
  <li>Menu2 --> Menu2.html -->(on button click)--> data.html --> edit.html</li>
  </ul>
  
  <p>So the app flows as explained above. I am using jQuery single page template(in each html file) because application have lots of more pages and having all this in just on html is not suitable.</p>
  
  <p>I have created </p>
  
  <pre><code>&lt;div data-role="page" id="menuPage" data-theme="c"&gt;&lt;/div&gt;
  &lt;div data-role="page" id="menu1" data-theme="c"&gt;&lt;/div&gt;
  &lt;div data-role="page" id="details" data-theme="c"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and on button click i am loading the respective html file inside respective div using <code>$('#divID').load(abc.html, callback)</code> and in <code>callback</code> creating dynamic elements in above html files and appending using <code>jQuery.append()</code>.
  After elements appended i am using <code>$.mobile.changePage($('#menuPage'), 'pop');</code> to change page.</p>
  
  <p>Everything working fine till now, but problem arises when i try to use back button. In chrome browser or in mobile simulator when i use back button i am able to get on the previous page, but when i try to use link/button on that previous page to go forward next page is created without any style. It's coming as in C-Grade browser without any style.</p>
  
  <p>So question is that is it the right way to interact with pages and loading them in DOM. And how to get back button properly working.</p>
  
  <p>Any suggestions will be very helpful. Thanks in advance...</p>