jQuery mobile changepage jumps back to old page issue demo

jQuery mobile changepage jumps back to old page issue demo

by Yanbing Peng

HTML

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<div data-role="page" id="page1" data-theme="a">
    <div data-role="header" data-position="fixed">
        <h5>Demo Page 1</h5>
    </div>
    <div data-role="main" class="ui-content">
        <h2>jQuery mobile changepage jumps back to old page demo</h2>
        <p>Click "Go To Page 2" button to go to page2</p>
        <p>On Page2 click Ok Button to come back to page1</p>
        <p>Keeping going back forth between two pages for few times.</p>
        <p>Eventually, you will find that clicked on "Go To Page2" button to flip to Page2 but it soon jumps back to page1 automatically. </p>
        <h2>Please read the comments in the javascript for explaination</h2>
        <a href="#page2" data-transition="flip" class="ui-btn ui-icon-carat-r ui-btn-icon-right">Go To Page 2</a>
    </div>
</div>

<div data-role="page" id="page2" data-theme="a">
    <div data-role="header" data-position="fixed">
        <h5>Demo Page 2</h5>
    </div>
    <div id="page2UiContent" data-role="main" class="ui-content">
    </div>
    <div data-role="footer" data-position="fixed" style="text-align:center;">
        <div data-role="navbar">
            <ul>
                <li><a id="page2OkButton" class="ui-btn ui-icon-check ui-btn-icon-left">OK</a></li>
            </ul>
        </div>
    </div>
</div>

JavaScript

$(document).on('pagebeforeshow', '#page2', function(){
    console.log('Page2 before show');
    var htmlGeneratedOnTheFly = '<ul data-role="listview" data-inset="true">';
    for(var i=0; i<4; i++)
    {
        htmlGeneratedOnTheFly += '<li><a>Random html element</a></li><li data-role="list-divider"></li>';
    }
    htmlGeneratedOnTheFly += '</div>';
    $('#page2UiContent').empty();
    $('#page2UiContent').append(htmlGeneratedOnTheFly);
    $('#page2UiContent').trigger('create');
    
   
    //////////////////////////////////////////////////
    //The following section is where the bug is generated. 
    //Each on "page2 before show event" will add a OK Button click handler. 
    //The handlers never get cleared.
    //More and more handler is added to the Page2 OK button as pages going back and forth.
    //Open the browser's console window to see multiple "Page 2 OK Button clicked!!!" lines on one button click. 
    //To fix the bug, move the following section out of the $(document).on('pagebeforeshow', '#page2', function(){});
    //////////////////////////////////////////////////
    $('#page2OkButton').click(function(){
        console.log("Page 2 OK Button clicked!!!");
        $.mobile.changePage('#page1', {transition:"flip"});
    });
    //////////////////////////////////////////////
    //////////////////////////////////////////////
});