单击时奇怪的 jQuery Mobile 突出显示行为答案

【问题标题】：Weird jQuery Mobile highlight behavior on click单击时奇怪的 jQuery Mobile 突出显示行为
【发布时间】：2014-07-12 22:33:53
【问题描述】：

我有一个相当普通的 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 时，我发现当我单击时在 data-role="footer" div 上切换了一个名为“ui-fixed-hidden”的类。

【问题讨论】：

好像你有多个具有相同 ID 的 div。
不，它们是独一无二的。该脚本附加了#footer div 的html。
对，我的错。要创建页脚，您可以尝试$("div[data-role='page']").trigger('create'); 吗？
或者$('[data-role="footer"]').trigger('create');会更精确。
将 data-tap-toggle="false" 添加到页脚 div。使用.toolbar() 创建页脚/页眉而不是.trigger("create")。

标签： javascript jquery html jquery-mobile

【解决方案1】：

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

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

【讨论】：