jquery mobile history.back() only work for first time

Question

currently I have encountered a problem with history. back ().

I have 2 pages, which is pageA.html, pageB.html.

I'm using the following code for go to next page and back to previous page

// go to next page
function changePage(url) {
  $.mobile.pageContainer.pagecontainer("change", url, {
    allowSamePageTransition: true,
    transition: 'none',
    showLoadMsg: false,
    reloadPage: false,
    changeHash: true
  })
}

//back to previous page
function backToPreviousPage(){
  alert("back");
  history.back();
}

The codes work fine for the first time, as the flow below

First time : pageA > pageB (click on back button once) > pageA

So I have successfully back to pageA again. And here's the problem comes.

Second time : pageA > pageB (first click back button no respond, then click for second time) > pageA

When it comes to third time, I need to click on the back button 3 times then only can make the history.back() work, I can get the alert message, so the backToPrevious function is called.

so the problem is like below:

• 1st navigate : pageA > pageB > pageA (1 click)
• 2nd navigate : pageA > pageB > pageA (2 clicks)
• 3rd naviagate : pageA > pageB > pageA (3 clicks)

and so on....

Ii can't just hardcode navigate back to pageA in the backToPrevious function, because I not only can navigate to pageB from pageA, but also can navigate pageB from other page.

So far I have tried with this

history.back(-1);

and this

<a data-rel="back" href="javascript:history.back(1)" data-theme="a">Back</a>

but still can't fix the problem.

Appreciate if anyone can tell me what am i doing wrong. Thank you.

Answer 1

Just use this code.

   function changePage() {
     $.mobile.changePage("pageA.html");
     return false;
    }

    function backToPreviousPage(){
     navigator.app.backHistory();

    }