html - jQuery Mobile - Persistent Toolbars with backbutton -
edit
fiddle of problem: https://jsfiddle.net/9k449qs2/ - debug fiddle , try select header picker. not able so, select whole page every time click.
i'm working on project has persistent header , footer. content changes clicking through application. wanted add backbutton header 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 code directly after header looks this:
<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 connection</button> <a href="#checkbattery"> <button id="checkbatterystate" class="button">check battery</button> </a> </div> </div> <!-- checkconnection end --> <div data-role="page" id="checkbattery"> <div class="content gray"> <p>just plug device , you'll information battery state.</p> </div> </div> <!-- checkbattery end -->
so works fine, transitions , on. can't backbutton work. not clickable. headers on each page not clickable in form. if debug gapdebug , click onto header, gapdebug marks pagecontainer , not header.
so, how can make backbutton inside header clickable on each page?
edit
so header doesn't care kind of button place inside it. no matter button choose, or attribute add <a></a>
not clickable. tried run gapdebug again, pressing "inspect" button , clicked on backbutton, selects me code page wrong.
so found solution. problem was, not documentation persistent toolbars helped me, instead documentation external toolbars did then.
simply add
$(function(){ $( "[data-role='header'], [data-role='footer']" ).toolbar(); });
inside <script></script>
tag , works fine. happens because these toolbars not within page not auto initalize. must call toolbar plugin yourself.