jQuery: How to fire onclick first before onblur?

Question

How can I fire the onclick event first before the onblur event if I'm currently focused at the textbox in jQuery?

Expected Output: Fire the button click event first before the blur event in the texbox. Alerts "mybtn onclick alert"

Demo: http://jsfiddle.net/Zk8Fg/

Code:

<input type="text" name="fname" id="fname" value="" /><br />
<input type="button" name="mybtn" id="mybtn" value="Click Me" />

<script language="javascript">
$(document).ready(function() {
    myFunc();
});

function myFunc() {
    $('#fname').focus().blur(function() {
        alert('fname onblur alert'); 
    });

    $('#mybtn').click(function() {
        alert('mybtn onclick alert'); 
    });
}
</script>

Thanks :)

Can I ask why and/or what you are trying to do? maybe someone will be able to suggest some alternatives? UI Events happen is certain order and I don't think it can be changed. — Bala R
@Jonathan: I have a validation on the blur event currently focused at the textbox but the blur scenario is once I clicked the button then the blur event fires first than the click event. — marknt15

SpliFF SpliFF · Accepted Answer · 2011-06-23T03:26:06

Well it's probably part of the standard which event fires first so you probably shouldn't be changing the order. What you could do though is postpone the resulting action using window.setTimeout with a short delay.

$('#fname').focus().blur(function() {
    window.setTimeout(function(){alert('fname onblur alert')},0.1); 
});

I agree with the other comments though, it really looks like you should rethink how you're going about this because reordering default events strikes me as a lame hack that probably has more elegant solutions.

jQuery: How to fire onclick first before onblur?

2 Answers