jquery-ui button disable behavior is not right

Question

I disable my jqueryui button in its click event like this

$('#btn').button().click(function(){
    $(this).button('disable');
});

and it seems that the button always stays in hover state when I enable it in another place later. I have tried to add $('#btn').button('refresh'), but it's not work. How can I restore its state to default when it's been enabled?

Answer 1

When you use the JQuey UI, usually you also use the embedded CSS. When you disable an element the library add the relaive class. Maybe you can disable this behaviour when you declare the button. Try http://jqueryui.com/demos/button/

Answer 2

You can use .trigger('mouseout').

Demo here