Jquery focus out event

Question

I have a text box with a focus event. whenever a text field loses focus (Tab, clicking on any other part of the form), a user-defined function is called based on certain conditions that removes the warning.

Now my form also has a button, after filling in the text field, when I press the focusOut button, the text field event is called instead of the button click event.

How to stop the foucusout event of a text box being raised when a button is clicked?

("$textbox").focusout(function(){ validation; alert("message"); }); ("$btn").click(function(){ ---- }); 

Can someone help me?

Answer 1

I changed the click event to mousedown (so it fires first) and used the variable to track your click:

 var buttonClicked = false; $('#txt1').focusout(function(){ if(!(buttonClicked)){ alert('BlurEvent'); }else{ buttonClicked = false; } }); $('#btn').mousedown(function(event){ alert('ClickEvent'); buttonClicked = true; }); 

http://jsfiddle.net/924SZ/

EDIT

 var buttonClicked = false; $('#txt1').focusout(function(){ if(!(buttonClicked)){ // do normal focusout code. }else{ // button was clicked - dont execute some code. buttonClicked = false; } //this always executes regardless of focusout or button click var reply =confirm("Are you happy with the input?"); }); $('#btn').mousedown(function(event){ buttonClicked = true; }); 

Answer 2

Don't you focusout event, followed by the click event event?

Perhaps alert prevents the completion of the click button.

Try removing the alert to see if both events fire.

Update:

Perhaps the mousedown event will work instead of click , because it will be registered on mousedown , and not on the mouseup event, which will be << 21>.

Answer 3

I think the jQuery selector works with $ . So IMO, you are the only mistake you make here by mistakenly placing the US dollar sign.

How about this one. (if TextBox has class="textbox" and Button has class='btn' )

 $(".textbox").focusout(function(){ alert('MsgBox'); }); $(".btn").click(function(){ alert('Button'); }); 

Change the selector as below if you have ID instead of class

 $("#textbox") AND $("#btn") 

http://jsfiddle.net/dAa2R/6/