Back to previous page.

JQuery Mobile

by Omar X

HTML

<!-- Start of first page -->
<div data-role="page" id="foo">
    <div data-role="header">
        	<h1>Foo</h1>

    </div>
    <!-- /header -->
    <div data-role="content">
        <p>Click <a href="#bar">bar</a> to go normally to the next page

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

    </div>
    <!-- /footer -->
</div>
<!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="bar">
    <div data-role="header">
        	<h1>Bar</h1>

    </div>
    <!-- /header -->
    <div data-role="content">
        <p>The below link will go to the previous page programatically.</p>
        <p><a href="" id="back">Back to foo</a>

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

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

JavaScript

$('#back').on('click', function () {
    var previous = '#' + $.mobile.activePage.prev('div[data-role="page"]')[0].id;
    $.mobile.changePage(previous, {
        transition: 'slide',
        reverse: true
    });
});