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

You can use .trigger('mouseout').

Demo here

Answer 2

When you use the jQuery UI, usually you also use the embedded CSS. When you disable an element the library add the relative class. Maybe you can disable this behaviour when you declare the button.

Try http://jqueryui.com/demos/button/