How can I resize a jQuery Mobile page after adding elements to the DOM?

Question

I have a jQuery Mobile (1.0.1) page with a fixed footer:

<footer data-role="footer" data-position="fixed">
    <a href="#">Click Me!</a>
</footer>

When I add elements to the DOM, the footer bar (which obviously shouldn't move) scrolls off the bottom of the screen - in accordance with the height of the elements added to the DOM. There's also white background between the previous end of the (grey) page and the new position of the footer bar.

If I scroll down and back up, the formatting is corrected.

I'm using Chrome, but it also occurs in Mobile Safari and IE.

The code that adds elements to the DOM is:

$("footer a").click(function () {
    $("div[data-role='content']").append($("<button>Button A</button>"), $("<button>Button B</button>"), $("<button>Button C</button>"), $("<button>Button D</button>"));

    $("div[data-role='content']").trigger("create");
});

What am I missing?

Answer 1

Have you tried calling the JQM updatelayout event?

See this page for some more info.

Try something like this:

$("div[data-role='content']").trigger("create").trigger( 'updatelayout' );