jQuery back button does not work properly after refresh

Question

On my jQuery mobile app;

On menu.html and inside body I do something like this to go help.html;

....

$(document).off('pageinit', '#menupage').on('pageinit', '#menupage', function() {

    $(document).off('click', '#help').on('click', '#help', function(){
            $.mobile.changePage("help.html", {
                reloadPage: true,
                transition: "flip",
                reverse: false
            });
        });
}

....

<li><a id="help" href="#" role="link" data-role="none">
                        <div class="img help"></div>
                        <div class="menuTitle langMenuItem3">Help</div>
                        <div class="arrow"></div>
</a></li>

Then on the help.html page I have a back button like this to go back to menu.html:

<header data-role="header">
    <a href="#" data-rel="back" class="button" data-role="none">
        <div class="arrow_reverse"></div><span class="langBack">Terug</span>
    </a>
    <div class="pageTitle">Over deze app</div>
</header>

My problem is this works under normal conditions, BUT if I make a refresh on menu.html, then go to help.html and then go back to menu again, menu.html does not load properly, I can see the page visually loaded ok but on firebug I see that some necessary javascripts inside tags does not hit anymore, It never hits any javascripts anywhere on menu.html anymore, just loads the previous html from cache thats all. Also the page title of menu.html does not change correctly and stays as "Help" after that point.

my full menu.html looks like this;

http://jsfiddle.net/M5CYZ/

Any ideas?

Answer 1

Do it this way.

Give back button an ID

<a href="#" id="backbtn" class="button"> 
 <div class="arrow_reverse"></div><span class="langBack">Terug</span> 
</a>

and then add the below code in help.html

$('#backbutton').off('click').on('click', function () { 
 $.mobile.changePage("menu.html", { 
  reloadPage: true, 
  transition: "flip", 
  reverse: true 
 }); 
});