jQuery Mobile CSS not styling JS-inserted HTML

Question

I'm making a mobile web app with Backbone.js and jQuery Mobile but I'm having some styling issues. Just to test things out I wanted to style my Logout button. Before styling, I had:

this.$el.append('<input type="button" id="logoutButton" value="Logout">');

at a certain point at my code, which had been working fine. I changed this line to:

this.$el.append('<a href="" data-role="button" data-theme="c" data-inline="true" id="logoutButton"> LOGOUT </a>');

But, when I do this, it just displays "LOGOUT" as a plain link with no CSS applied. I tried putting the same code in the body of my HTML file instead of inserting it with JS and it was styled correctly. I load my CSS file in the head of my document before all other files and my JS code is contained in a function bound to $(document).ready() so I'm not sure why the CSS is not working.

Am I missing something conceptual? How can I fix this?

Answer 1

I think you need to use buttonMarkup to refresh styling like this :

$("#one").append('<a href="" data-role="button" data-theme="c" data-inline="true" id="logoutButton"> LOGOUT </a>')
$("#logoutButton").buttonMarkup("refresh");

Where #one is just a random page in HTML.

Demo : http://jsfiddle.net/hungerpain/tEnet/

And DONT USE ready event with jQM.