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.