Jquery UI button issue

Question

Please take a look at this

http://jsfiddle.net/WAre9/4/

The problem is, after changing the text of link, .button() doesn't work properly.

Here is scrshot before:

And after mouse click:

As you see all paddings, font styles have gone. Any suggestion? How to fix this problem?

Answer 1

This is from How do I replace jQueryUI button text?

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

It's because the span tag is removed after setting element.text see this fiddle:

http://jsfiddle.net/WAre9/8/

or you can just change text of span element:

http://jsfiddle.net/WAre9/10/

Answer 3

http://jsfiddle.net/Bue3B/

use children('span').text...