Change button text jquery mobile

Question

I'm using the new jquery mobile 1.0 alpha 1 release to build a mobile app and I need to be able to toggle the text of a button. Toggling the text works fine, but as soon as you perform the text replacement the css formatting gets broken.

Screenshot of the messed up formatting: http://awesomescreenshot.com/03e2r50d2

    <div class="ui-bar">         <a data-role="button" href="#" onclick="Podcast.play(); return false" id="play">Play</a>         <a data-role="button" href="#" onclick="Podcast.download(); return false" id="download">Download</a>         <a data-role="button" href="#" onclick="Podcast.consumed(); return false" id="consumed">Mark Old</a>     </div>  $("#consumed").text("Mark New"); 

Answer 1

When you create the button it adds some additional elements, some inner <span> elements that look like this:

<a data-role="button" href="#" onclick="Podcast.consumed(); return false" id="consumed">   <span class="ui-btn-inner ui-btn-corner-all">     <span class="ui-btn-text">Mark Old</span>   </span> </a> 

To change the text, you'll want this selector:

$("#consumed .ui-btn-text").text("Mark New");