jQuery detect click on disabled submit button

Question

Fiddle: http://jsfiddle.net/ugzux/

As you can see, I have a form with a disabled (via javascript) submit button.

I want to be able to bind a click event to it anyway, so I can do some jazzy indication of what needs to be fixed on the input before I'll allow the form to be submitted (i.e enable the button again).

However, disabling the submit button also apparently disables any click events bound to the button, even if they are bound after the disable - any idea how to get around this?

Practically, one solution is to stop disabling the button and instead have an event that does

$('form').submit(function(event){     event.preventDefault();  }); 

However I want to know the ins and outs of disabled inputs and javascript events, and if there are workarounds as I've never encountered this behaviour before.

Answer 1

Found this in this question -

Firefox, and perhaps other browsers, disable DOM events on form fields that are disabled. Any event that starts at the disabled form field is completely canceled and does not propagate up the DOM tree. Correct me if I'm wrong, but if you click on the disabled button, the source of the event is the disabled button and the click event is completely wiped out. The browser literally doesn't know the button got clicked, nor does it pass the click event on. It's as if you are clicking on a black hole on the web page.

I'd thought you might be able to 'fake' a click by wrapping the button in a div and firing the logic on the div's click event. But, as indicated above, the events on disabled elements do not seem to be bubbled up the DOM tree.

Answer 2

The best way I've found to do this is to use a "disabled" class to disable the button. You can then catch click events normally in jquery. If $(this).hasClass('disabled'), you do your 'jazzy indication' stuff, along with event.preventDefault(); Once the user has done their thing, you can removeClass('disabled') from the input[type="submit"] 'button'. Easy!