问题
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?
回答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.
来源：https://stackoverflow.com/questions/17663904/jquery-mobile-css-not-styling-js-inserted-html