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

Is the id of the button always myButton? If yes, then just use

$("#myButton").text('Stop');

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

Answer 3

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