jQuery Mobile - 带后退按钮的持久工具栏

Question

修改

这个问题的小提琴：https://jsfiddle.net/9k449qs2/ - 调试小提琴并尝试用你的选择器选择标题。您将无法这样做，每次点击它都会选择整个页面。

我正在处理一个具有持久页眉和页脚的项目。只需通过单击应用程序更改内容即可。现在我想在标题中添加一个后退按钮，我用它来做：

<header id="headerMain" data-position="fixed" data-role="header">
    <a href="#" data-rel="back">
        <div class="backButton">GO BACK</div>
    </a>
</header>

我的代码后面的其余代码如下所示：

<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 and you'll get information about your battery state.</p>
    </div>
</div> <!-- checkBattery end -->

所以一切正常，过渡等等。但我无法获得后退功能。他不可点击。每页上的标题都不能以任何形式点击。如果我用gapDebug调试它并点击标题，GapDebug标记Pagecontainer而不是标题。

那么，如何让每个页面上的标题中的后退按钮可以点击？

修改

所以标题并不关心我放在它里面的按钮类型。无论我选择哪个按钮，或者我添加到<a></a>的属性，都无法点击。 所以我试着再次运行GapDebug，按下＆＃34; Inspect＆＃34;按钮，然后单击我的后退按钮，它会从页面中选择我错误的代码。

Answer 1

所以我找到了解决方案。问题是，持久性工具栏的文档并没有帮助我，而是外部工具栏的文档做到了。

只需添加

$(function(){
    $( "[data-role='header'], [data-role='footer']" ).toolbar();
}); 

在<script></script>标记内，一切正常。发生这种情况Because these toolbars are not within the page they will not auto initalize. You must call the toolbar plugin yourself.