UPDATE
Here is a fiddle of the problem: https://jsfiddle.net/9k449qs2/ - attempt to select the header using your picker, but every time you click it will select the whole page instead.
I am currently working on a project that includes a persistent header and footer. The content changes as you navigate through the application. I recently added a back button to the header like this:
<header id="headerMain" data-position="fixed" data-role="header">
<a href="#" data-rel="back">
<div class="backButton">GO BACK</div>
</a>
</header>
After the header, my code continues with:
<div data-role="page" id="pageMain">
<div class="content gray">
<a href="#checkConnection">adfjsöalfjasödf</a>
</div>
</div><!-- pageMain end -->
<footer id="footerMain" data-position="fixed" data-role="footer">
Footer
</footer>
<div data-role="page" id="checkConnection">
<div class="content gray">
<button id="checkConnectionState" class="button" onclick="CTFNetworkState()">Check your Connection</button>
<a href="#checkBattery">
<button id="checkBatteryState" class="button">Check your Battery</button>
</a>
</div>
</div> <!-- checkConnection end -->
<div data-role="page" id="checkBattery">
<div class="content gray">
<p>Just plug your device in and you'll get information about your battery state.</p>
</div>
</div> <!-- checkBattery end -->
Everything works fine with transitions except for the back button inside the header not being clickable. The headers on each page are unresponsive. GapDebug shows the Pagecontainer being selected when I try to click the header.
How can I make the back button inside the header clickable on all pages?
UPDATE
The header seems to be unresponsive to any buttons placed within it. No matter what button or attributes I add to my <a></a> tag, it remains unclickable. I tried running GapDebug again, pressing "Inspect," and clicking on the back button, but it still selects the wrong code.