How do I replace jQueryUI button text?

Question

I've got a button that I use with jQueryUI somethink like this (simplified).

<button id="mybutton">Play<button> <script> $("#mybutton").button().toggle(     function(){        $(this).text('Stop');     },     function(){        $(this).text('Start');     }, ); </script> 

This code breaks the way the button looks because when making it into the button widget, there's a new span added inside the button. So I'm changing the button value like this now

$(this).find('span').text('Stop'); 

This is hacky because I can't treat the button as a black box anymore and have to go inside.

Is there a clean way to do this?

Answer 1

Maybe you could use the label option of the jQuery UI button now instead?

$("#mybutton").button().toggle(function() {    $(this).button('option', 'label', 'Stop'); }, function() {    $(this).button('option', 'label', 'Start'); }); 

jsbin preview here

Answer 2

You can use the .button("refresh") method after you alter the text.

 $("#mybutton").button().toggle(     function(){        $(this).text('Stop').button("refresh");     },     function(){        $(this).text('Start').button("refresh");     }, ); 

http://jqueryui.com/demos/button/#method-refresh