Pages not directly in the body but inside other elements

Pages not directly in the body but inside other elements

Hi there! Please consider the following code fraction...

  1. <body>
  2.       <div id="page1" data-role="page">..... </div>
  3.       <div id="page2" data-role="page">..... </div>
  4.       <div>
  5.             <div id="page3" data-role="page">..... </div>
  6.             <div id="page4" data-role="page">..... </div>
  7.       </div>
  8. </body>
As you can see, page3 and page4 are under div element, whereas page1 and page2 are directly inside the body. There is a specific reason I have to follow this structure.

I'm using the following to switch between pages:
  1. $.mobile.changePage('#page1', { changeHash: false });
It works only for page 1 and 2 but NOT for 3 and 4. Can I make it to work for all four with this structure?