jQuery-ui: enabling disabled button doesn't restore event

Question

I have a problem: after enable button, it look like enabled but isn't clickable. (reloading page fix this problem, but i won't do it). Firstly, on (document).ready, i disable this button.

For enable i do:

$("#submit_order").attr('disabled', false).removeClass( 'ui-state-disabled' );

for disable:

$("#submit_order").attr('disabled', true).addClass( 'ui-state-disabled' ); 

HTML code:

<button id="submit_order">Send an order</button> 

button jQuery code:

$( "#submit_order" )
    .button()
    .click(function() {
          $( "#dialog-form" ).dialog( "open" );
});

When i clicked this button after enabling, code above didn't invoke.

Answer 1

Yes, previous answers may work for you, but for me the events weren't firing when I "re-enabled" the button with .removeAttr("disabled") and using .removeClass("ui-state-disabled").

The official answer appears to be

$(".selector").button("option", "disabled", true);

to disable, and

$(".selector").button("option", "disabled", false);

to enable a jQueryUI button()

from http://jqueryui.com/demos/button/#option-disabled

Answer 2

As I remember jQueryUI extends jQuery library by providing different components where most of them have methods enable() and disable().

You may try alternative (IMHO more preferred) way:

$('#submit_order').button().enable();
   and
$('#submit_order').button().disable();

this will free Your mind from manual managing attributes - JQUI do this self. This is powerful, because you may create buttons using different underlying elements (so that enabling and disabling them will use different methods) ex. Standard button uses attribute disabled="disabled" (browser implementation - standard)

But button made from anchor doesn't support this at all.