Changing the value of a jQuery mobile button using jQuery

Question

Wondering if you can help me out. I seem to have a problem changing the text of my jQuery Mobile buttons with jQuery.

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

Code above which was recommended for a related question doesn't seem to work.

Neither does:

$("#myButton").attr(value,"New Test"); 

The code for my button is as followed:

<input type="button" name="answer" id="myButton" data-theme="b" data-answer="4" value="next"></button> 

I'll appreciate any feedback guys. Thanks

Answer 1

Since jQuery mobile generates HTML around your input type="button" element, and the text that you're seeing isn't actually value of the button, but a text inside of a generated span. You can either traverse the DOM looking for actual span, OR tell jQuery to re-generate button HTML by calling .button("refresh"), like so:

$("#MyButton").val("changed value"); $("#MyButton").button("refresh"); 

The latter is recommended, since it will stay compatible with future versions of jQuery mobile, while traversing the DOM might break if jQuery team chooses to change structure of the HTML generated for the button.