footer hides when moves on next page

I have html structure like this

<div data-role="page" data-theme="b">

    <div data-role="header" data-theme="b">
        <h1>header</h1>
    </div><!-- /header -->

    <div data-role="content" data-theme="b">
        <a href="#p2" data-role="button" data-icon="arrow-r" data-theme="b" data-iconpos="right">next pagey</a>  
    </div><!-- /content -->

    <div data-role="footer" data-theme="b" data-position="fixed">
        <h1>Footer</h1>
    </div><!-- /footer -->

</div><!-- /page -->

<div id="p开发者_Go百科2" data-role="page" data-theme="b">

    <div data-role="header" data-theme="b">
        <h1>header</h1>
    </div><!-- /header -->

    <div data-role="content" data-theme="b">
        <h1>Content</h1> 
    </div><!-- /content -->

    <div data-role="footer" data-theme="b" data-position="fixed">
        <h1>Content</h1>
    </div><!-- /footer -->

</div><!-- /page -->

But when i click on next page and next page comes in with auto-added back btn in header, when I click on back button previous page appears but footer dissappears..

in FF working ok, but not in ipad simulator

Getting fixed footers to work is a pain for the JQM team. I think it's just another little bug that is caused by unforseen circumstances. Well, nevermind...

A bit of insight: Those darn mobile browsers have no support of fixed CSS positioning, so this is done with javascript and absolute position (and a ton of hacks - I bet)

This should already give you a clue...

If the behaviour isn't specific just to the emulator (quite possible!) and the problem remains after you fill the page with contents (I mean - finish writing the application) then all you need to do is to kickstart the code that repositions the footer. I'd do it like that:

$('div').live('pageshow',function(){ $(window).trigger('orientationchange') });

The orientationchange event should work. You can also try resize if orientationchange causes any new problems.