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?

@AbrahamUribe, all the CSS code I have at the moment is just the jQM CSS file, unedited. — Emily
– Emily, Commented Jul 16, 2013 at 2:01

Community · Accepted Answer · 2017-05-23 10:32:08Z

2

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.

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Jul 15, 2013 at 21:09

krishwader

11.4k1 gold badge36 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Emily Over a year ago

Great, I'll try that tomorrow and see how it works. And thanks for the tip about the ready event. Wouldn't have thought of that.

Collectives™ on Stack Overflow

jQuery Mobile CSS not styling JS-inserted HTML

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related