Question

我正在创建一个JQuery Mobile站点，它使用Javascript注入页脚（下面的代码只显示注入HTML div的最终HTML，而不是创建HTML的过程。）

我遇到的问题是，当我通过将代码放在HTML div中添加HTML时，JQuery Mobile页脚正确呈现，但是，如果我使用Javascript innerHTML加载页脚变量，它变得扭曲。任何想法为什么会这样？

最终的页脚HTML：

<footer data-role="footer" data-id="navFooter" data-position="fixed">
    <nav data-role="navbar" class="nav-footer">
        <ul>
            <li><a href="" id="LandmarksTab" class="ui-btn-active ui-state-persist" data-icon="custom">Landmarks</a>
            </li>
            <li><a href="" id="MoreTab" data-icon="custom">More</a>
            </li>
        </ul>
    </nav>
</footer>

示例代码：

通过Javascript：http://jsfiddle.net/jakechasan/42kN6/

放置页脚

通过HTML放置页脚：http://jsfiddle.net/jakechasan/7Xu7b/1/

Answer 1

如果你在刚刚收到新内容的元素（div）上调用.enhanceWithin()，它应该很好：

$('#bottomTabBar').enhanceWithin();

Working Demo

Answer 2

原因是jQM在加载后增强了页面。处理此问题的最佳方法是使用onpagebeforecreate事件或使用enhanceWithin（）方法，如果您要将内容动态添加到已创建的页面中。

男孩，人们在这里很快。无论如何，我会发布我的答案，因为它有更多的信息和pagebeforecreate的备用选项。

JS和HTML不同的页脚渲染

2 个答案: