JQuery 移动多页和附加页脚没有样式（Intel XDK）

Question

多页工作正常，但我想在每个页面容器中注入页脚代码。页面代码：

<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>

我只是用一些按钮注入页脚代码（当设备准备就绪时）：

$(".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>

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

我做错了什么？

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

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

PS: 看图片

Answer 1

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

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

JQuery 移动多页和附加页脚没有样式（Intel XDK）

JQuery Mobile Multipage & Appended footer has no styling (Intel XDK)

javascript

css

jquery

intel-xdk