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

Question

The multipage is working, but I want to inject the footer code in every page container. Page Code:

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

And the I just inject the footer code with some buttons (When device is ready):

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

This is the full footer code:

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

The code gets injected, but on the mainpage, the Buttons are not displayed; instead, there are plain text links. On the second page, everything is displayed very well. I can switch between the pages.

What did I do wrong?

edit: I used enhanceWhithin(), and its working. But when I click somewhere on the document, strange colors appear, which are caused by the class ".ui-fixed-hidden". Where does this come from?

edit2: https://jsfiddle.net/564f1fkf/ It's not exactly the same, but if you go to site 2 and then back to site 1 and click somewhere on the page, you should see the problem.

PS: See pictures

Answer 1

You have to call the enhanceWithin() method on data-role="content" element. This will enhance the newly added HTML into jQuery mobile format.

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