Question

I am building an app using jQuery mobile and phonegap

The app is ready, and works absolutely fine on Android, Android Simulator, Desktop browsers
But when I deploy it on iPhone the back buttons stop working. I am adding an attribute data-rel="back" in my anchor tags, to go back. (As mentioned in the jQM docs)

From my index.html I call, menu.html. When I click back button (not browser back button) on the menu.html app doesn’t come back on index.html

This problem is there only for iPhone.

This is how my index.html looks like

        <div id="content_home" class="mainColumn" data-role="page">
            <div class="header">
                <a href="Menu.html"  id="home_nav_btn" class="headerButton nav fr" style=""><span></span></a>
                <a id="bg" class="headerButton home fl" style=""><span></span></a>
                <h1><img src="images/bank_trust.png" alt=""></h1>
            </div>
            <!-- Remaining HTML Code -->
        </div>

And my Menu.html looks like this,

<div id="content_nav" class="mainColumn" data-role="page">
    <div class="header">
        <a id="btn_signout" class="headerButton fr" style=""><span>Signout</span></a>
        <a data-rel="back" class="headerButton home fl" ><span></span></a>
        <h1><img src="images/bank_trust.png" alt=""></h1>
    </div>
    <div class="content"></div>
    <script src="js/menu.js"></script>
</div>

Answer 1

Solved this myself…

jQM docs say that you must have href attribute which gives a semantic meaning to your anchor. I added href attribute and its all working fine now.