Question

I have a simple form with a text and a submit button like this

<label>Input something </label>
<input type="text" id="TextId" value="Whatever you input,it is wrong" />
 <div id="ErrorDiv"></div>
 <input type="submit" id="SubmitButton""/>

I attach a focusout event in the text box to show the mutiline message at ErrorDiv.
when I click button submit, onfocusout of the text execute first and it makes my button move out of its position And the Onclick Event won’t be fired.

fiddle link

Any one can explain to me how can It happen and How can I fix it

Thanks.

Answer 1

The blur event is being fired before the click event. This is happening because a click event gets fired after the mouse button is released. The easiest way to make this work is to show the alert on the mousedown event instead of on the click event.

For example, use this

    $("#SubmitButton").live("mousedown", function() {
        alert("button click!");
    });

The above change worked for me in chrome on OS X, however you should be aware that there is some controversy around this. A better solution would be to re-arrange your elements so that the validation messages don’t push out the submit button.