changePage “jumps” back to old page

Question

I\'ve a big problem with a jQuery Mobile Application: I\'m using custom functions (they are triggered by onClick) to switch the page with currentPage.

It only happen

Answer 1

I encountered exactly the same behaviour and it seems that few people are having the same issue. At first I thought it is caused by jQuery mobile library. Later on, I manage to find where the problem came from and it is a bug in my own code. I made a demo to explain the issue.

http://jsfiddle.net/pengyanb/6zvpgd4p/10/

Hopefully, this can be hint for people having the same problem.

$(document).on('pagebeforeshow', '#page2', function(){
    console.log('Page2 before show');
    var htmlGeneratedOnTheFly = '
';
    for(var i=0; i<4; i++)
    {
        htmlGeneratedOnTheFly += '
Random html element
';
    }
    htmlGeneratedOnTheFly += '

'; $('#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"}); }); ////////////////////////////////////////////// ////////////////////////////////////////////// });

    

        
Demo Page 1
    
    

        
jQuery mobile changepage jumps back to old page demo
        
Click "Go To Page 2" button to go to page2
        
On Page2 click Ok Button to come back to page1
        
Keeping going back forth between two pages for few times.
        
Eventually, you will find that clicked on "Go To Page2" button to flip to Page2 but it soon jumps back to page1 automatically. 
        
Please read the comments in the javascript for explaination
        Go To Page 2
    



    

        
Demo Page 2
    
    

    
    

        

            

                
OK