back-button not showing using recent jquery-mobile

back-button not showing using recent jquery-mobile

Please consider this example:

  1. <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>Listviews - jQuery Mobile Demos</title>
           

            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
            <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
            <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

        </head>
        <body>

            <div data-role="page" id="foo">

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

                <div data-role="content">
                    <ul data-role="listview" data-theme="c" data-count-theme="e" data-inset="true">
                        <li><a href="#bar">Bar <span class="ui-li-count">12</span></a></li>
                    </ul>
                </div><!-- /content -->

                <div data-role="footer">
                    <h4>Page Footer</h4>
                </div><!-- /header -->

            </div>

            <div data-role="page" id="bar">

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

                <div data-role="content">
                    <ul data-role="listview" data-theme="c" data-count-theme="e" data-inset="true">
                        <li><a href="#foo" data-direction="reverse">Foo<span class="ui-li-count">12</span></a></li>
                        <li><a href="#">Outbox <span class="ui-li-count">0</span></a></li>
                        <li><a href="#">Drafts <span class="ui-li-count">4</span></a></li>
                        <li><a href="#">Sent <span class="ui-li-count">328</span></a></li>
                        <li><a href="#">Trash <span class="ui-li-count">62</span></a></li>
                    </ul>
                </div><!-- /content -->

                <div data-role="footer">
                    <h4>Page Footer</h4>
                </div><!-- /header -->

                </div>

        </body>
    </html>
























































I would expect a "back" button in the header section, but it does not show.

If I change the stylesheet and jquery imports to this

  1.     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
        <script src="http://code.jquery.com/jquery-1.5.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>



it works as expected.

Is this an error in jquery or am I doing something wrong ?