Question

I have a single page jquery mobile application in which there are few parent pages (directly under body) and few child pages dynamically generated (with backbone.js) and kept within another div.

While linking the pages the parent pages are working fine but the pages inside a simple div are not working.

The following is the simple fiddle to describe the problem. Page-2 is working fine but Page-3 within a Div is not changing.

http://jsfiddle.net/zwhEB/

Answer 1

You have a extra div wrapped around page 3

• http://jsfiddle.net/zwhEB/1/ (Commented out the extra div, working)

HTML

<!-- Remove this extra div -->
<!-- <div id="pages"> -->
    <div data-role="page" id="p3">
        <div  data-role="header" data-rel="back">
               <h1>Header Page 2</h1>
        </div>

        <div  data-role="content">
            <p>This is page2</p>
        </div>

        <div  data-role="footer"><h4>Footer</h4></div>
    </div>
<!-- Remove this extra closing div -->
<!-- </div> -->