button style is messed up after changing the text through jquery

Question

So I have a button whose text I want to update so that one of the character is of say red color. The way I am achieving is by setting html to the button.

<div data-role="page" id="homepage">
   <div data-role="content">
    <a id='mybutton' href="#" data-role="button" data-icon="check">My Button</a>
   </div>    
</div>

​and here is how I update it through jQuery

.redtext{color:red;font-size:medium;text-shadow: aqua;}​

$("#mybutton").html("My Button(<span class='redtext'>0</span>)");​

The zero do come in red color but the button shape is now distorted and style removed it seems. Please see it a demo here http://jsfiddle.net/tqeF9/

Thanks in advance.

Answer 1

Add .ui-btn-text to your selector.

E.g. $("#mybutton .ui-btn-text").html("My Button(<span class='redtext'>0</span>)");​

See this post for the reason.