jQuery Mobile App-导航并不总是有效

Question

My Single Page Application contains a number of data-role="page" and each page loads one script where pageshow and pagebeforeshow are intercepted (such as below).

In pageshow I fill one html tag and in pagebeforeshow I empty it.

> $(document).delegate("#page1", "pageshow",        
function (e, data) {   
> filling page1Content ... 
}
> 
> $("#page1").on("pagebeforeshow", 
function(e, data) {
>   $("#page1Content").empty(); 
});

Backbutton is managed this way:

function onBackKeyDown() {
    if($.mobile.activePage.attr('id') == 'page2'){
        $.mobile.pageContainer.pagecontainer("change",
        "#page1");
    }else if ($.mobile.activePage.attr('id') == 'page3') {
        $.mobile.pageContainer.pagecontainer("change",
        "#page2");
    }
...

Navigation works properly as well as backbutton but after a while of surfing it gets broken, missing somepage or loading the same page and then it continues working properly.

Questions:

• How can I solve my Problem?

• Is there any wrong pattern/function in the way I am managing the event?

• Are pages stored in some sort of Stack? (if so, how can I check it)?

I am using JQM 1.4, Cordova 3.4, Android

Answer 1

My solution was to refactor my Single Page Application as a Multipage one.

Everything started working superfast and with no problem during the navigation.

I do not suggest to use SPA to someone who is new with this environment.