JS和HTML不同的页脚渲染[重复]答案

【问题标题】：JS and HTML different Footer Render [duplicate]JS和HTML不同的页脚渲染[重复]
【发布时间】：2014-06-04 06:11:50
【问题描述】：

我正在创建一个 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/

【问题讨论】：

$("[data-role=footer]").toolbar(); 是您所需要的。 jsfiddle.net/Palestinian/42kN6/4

标签： javascript jquery html css jquery-mobile

【解决方案1】：

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

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

Working Demo

【讨论】：

10 分钟...我正在寻找这篇文章的解决方案。 GJ :)
哪个帖子？它已经有了解决方案；）这是解决方案
感谢发帖，这个答案很好用。有谁知道为什么需要这样做？
这就是 jQM 的工作原理。每当您添加新内容时，您都必须以这种方式更新布局。

【解决方案2】：

这样做的原因是 jQM 在页面加载后增强了页面。处理此问题的最佳方法是使用 onpagebeforecreate 事件或使用 enhanceWithin() 方法，如果您要动态地向已创建的页面添加内容。

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

【讨论】：

感谢您发布有关 enhanceWithin 功能的信息。