Reputation: 7100
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>
Upvotes: 0
Views: 1718
Reputation: 7100
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.
Upvotes: 1