jQuery Mobile - Persistent Toolbars with backbutton - html

Question

EDIT
Fiddle of that problem: https://jsfiddle.net/9k449qs2/ - debug the fiddle and try to select the header with your picker. You will not be able to do so, it will select you the whole page every time you click.
I'm just working on a project which has a persistent header and footer. Just the content changes by clicking through the application. Now i wanted to add a backbutton into the header which i did with:
<header id="headerMain" data-position="fixed" data-role="header">
<a href="#" data-rel="back">
<div class="backButton">GO BACK</div>
</a>
</header>
The rest of my code directly after the header looks like this:
<div data-role="page" id="pageMain">
<div class="content gray">
adfjsöalfjasödf
</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 and you'll get information about your battery state.</p>
</div>
</div> <!-- checkBattery end -->
So all works fine, the transitions and so on. But i can't get the backbutton work. He is not clickable. The headers on each page are not clickable in any form. If i debug that with gapDebug and i click onto the header, GapDebug marks the Pagecontainer and not the header.
So, how can i make the backbutton inside the header clickable on each page?
EDIT
So the header doesn't care what kind of button i place inside it. No matter what button i choose, or what attribute i add to my <a></a> it is not clickable.
So i tried to run GapDebug again, pressing the "Inspect" Button and than clicked on my backbutton, it selects me the code from the page which is wrong.

Answer 1

So i found the solution. The problem was, that not the documentation for persistent toolbars helped me, instead the documentation for external toolbars did it then.
Simply add
$(function(){
$( "[data-role='header'], [data-role='footer']" ).toolbar();
});
inside your <script></script> tag and all works fine. This happens Because these toolbars are not within the page they will not auto initalize. You must call the toolbar plugin yourself.