Question

I’m trying to update some HTML using javascript in a webapp that uses JQuery mobile.
For some reason, I can not use the innerHTML attribute to create a JQuery Mobile button.
For example:

document.getElementById('someDiv').innerHTML = document.getElementById('someDiv').innerHTML + '<p><em>' + var1 + '</em>:<br />' + var2+'</p>';

works and gets styled correctly but:

document.getElementById('someDiv').innerHTML = document.getElementById('someDiv').innerHTML + '<a href="#" onclick="appendButton()" data-role="button">' + var1 + '</a>';

does not. I should say that the someDiv is enclosed within a <div data-role="controlgroup"> if that would make any difference. Also, there are other buttons on the page that work fine.

Why doesn’t this work and how can I make it work?

EDIT: I am compiling this into a native app using PhoneGap if that makes any difference…

Answer 1

You need to trigger the pageCreate event so that jQuery Mobile knows to re-style the element that you just added.

$("#someDiv").trigger("create")