奇怪的jQuery Mobile突出显示点击行为

Question

我有一个非常普通的jQuery Mobile应用程序。在底部有一个带有图标和文字的导航栏。

它的外观应该是

但是当我点击/点击页面时，它会切换到此

为了省去一些重复，我已经使用这个基本脚本在每个页面上添加相同的页脚。

$(function ()
{
    $("div[data-role='page']").append($("#footer").html());
    $("body").trigger('create');
});

这是HTML。

   <div class="hidden" id="footer">
        <div data-role="footer" data-position="fixed" data-id="footer">
            <div data-role="navbar" data-iconpos="top">
                <ul>
                    <li><a href="#maps" data-transition="none" data-page="maps" data-icon="grid">Maps</a></li>
                    <li><a href="#rules" data-transition="none" data-icon="bullets">Rules</a></li>
                    <li><a href="#schedule" data-transition="none" data-icon="calendar">Schedule</a></li>
                    <li><a href="#settings" data-transition="none" data-page="settings" data-icon="gear">Settings</a></li>
                </ul>
            </div>
        </div>
    </div>

我相信这个脚本是导致这个问题的原因。有关如何解决此问题的任何想法？

编辑：在检查DOM时，我发现了一个名为＆＃34; ui-fixed-hidden＆＃34;正在切换数据角色=＆＃34;页脚＆＃34;当我点击时，div。

Answer 1

事实证明，仅仅因为我的模板页脚div嵌套在另一个div中，“display：none”并不意味着jQuery Mobile没有使用该元素。因此，我有多个页脚创建了奇怪的行为。

我通过将模板页脚移动到单独的html文件然后在页面开始时加载它来解决此问题。