jQuery Mobile - Load events

http://jqmtricks.wordpress.com/2014/05/23/jquery-mobile-page-events-extra/

by Omar X

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css">
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<div data-role="page" id="menuPage">
    <!-- HEADER -->
    <div data-role="header" class="header" data-position="fixed">
         <h1>Header</h1>

    </div>
    <div data-role="content" class="ui-content"> <a href="#fooPage" class="ui-btn ui-btn-icon-right ui-icon-check">foo Page</a>

    </div>
    <div data-role="footer" class="footer" id="footer" data-position="fixed">
         <h1>Footer</h1>

    </div>
</div>
<div data-role="page" id="fooPage">
    <div data-role="header" data-add-back-btn="true">
         <h1>Static page</h1>

    </div>
    <div data-role="content" class="ui-content"> <a href="#menuPage" class="ui-btn ui-btn-icon-right ui-icon-check">Menu Page</a>
 <a href="#" class="ui-btn ui-btn-icon-right ui-icon-check" id="bar">redirect to Menu Page</a>

    </div>
</div>

JavaScript

$(document).on("pagecreate", "#fooPage", function () {
    $("#bar").on("click", function () {
        $(document).one("pagecontainerbeforechange", function (e, data) {
            if ($.type(data.toPage) == "string" && $.type(data.options) == "object" && data.options.stuff == "redirect") {
                $(document).one("pagecontainershow", function (e, ui) {
                    /* do something */
                    $(".ui-content", ui.toPage).append("<p class='msg'>redirected</p>");
                    setTimeout(function () {
                        $(".ui-content .msg", ui.toPage).remove();
                    }, 2500);
                });
            }
        });
        $.mobile.pageContainer.pagecontainer("change", "#menuPage", {
            stuff: "redirect"
        });
    });
});