javascript - JQuery Mobile 多页和附加页脚没有样式(Intel XDK)

Question

多页正在运行，但我想在每个页面容器中注入(inject)页脚代码。页面代码:

<div data-role="content">
  <div class="upage" id="mainpage" data-role="page">
     <div class="upage-outer">
       <!-- some content -->
     </div>
  </div>

  <div class="upage" id="uberpage" data-role="page">
     <div class="upage-outer">
       <!-- some content -->
     </div>
  </div>
</div>

我只是用一些按钮注入(inject)页脚代码(当设备准备就绪时):

$(".upage-outer").append('<div data-role="footer">Copyright + Buttons</div>');

这是完整的页脚代码:

<div data-role="footer" data-position="fixed" class="container-group inner-element uib_w_4" data-uib="jquery_mobile/footer" data-ver="0">
                        <div data-role="controlgroup" data-type="horizontal" class="brideButtonGroup">
                            <a class="widget uib_w_6" data-role="button" href="#mainpage" rel="external">Wetter</a>
                            <a class="widget uib_w_7" data-role="button" onclick="intel.xdk.device.launchExternal('http://wetter2.mt-labor.it.hs-worms.de/plot');">Mehr</a>
                            <a class="widget uib_w_8" data-role="button" href="#uberpage" rel="external">Über</a>
                        </div>
                    </div>

代码被注入(inject)，但是在主页上，按钮没有显示；相反，有纯文本链接。在第二页上，一切都显示得很好。我可以在页面之间切换。

我做错了什么？

编辑:我使用了 enhanceWhithin() 及其工作原理。但是当我点击文档的某处时，会出现奇怪的颜色，这是由“.ui-fixed-hidden”类引起的。这是从哪里来的？

编辑2:https://jsfiddle.net/564f1fkf/这并不完全相同，但如果您转到站点 2，然后返回站点 1 并单击页面上的某处，您应该会看到问题。

PS:看图

Answer 1

您必须在 data-role="content" 元素上调用 enhanceWithin() 方法。这会将新添加的 HTML 增强为 jQuery 移动格式。

$("[data-role='content']").enhanceWithin();