How to exclude Id from focusout

Question

With Jquery, focusout is just called when you click anywhere out of the focused area when "focusout" is set.

How do I exclude some id(s) from activiting the "focusout" function. ?

e.g here.

You have an input text field ( id="A")that hides some div on focus and shows that very div when it's out of focus, so but now it obviously will show the div when you click anywhere out of this ("#A") input field.

Question is, how do you set some id(maybe a select field(Id="B" next to it), not to fire off the "focusout" function. Hope it makes sense.

Answer 1

Try using relatedTarget event property:

$('#id').focusout (function (e) {

    if (e.relatedTarget && e.relatedTarget.id === 'dontFocusOut') {
        return;
    }
    //do your thing

});

Answer 2

You can unbind the focusout when you click on a div. This may return some expected results, and at some point in your code you'll probably want to rebind it. See here for an example: http://jsfiddle.net/hdCFA/

$("input").on("focus", function() {
    $(".hidden").show();
});
$("input").on("focusout",function() {
    $(".hidden").hide();
});

$(".clickable").on("mousedown", function() { 
    $("input").unbind("focusout"); 
});

HTML:

<input />
<div class="hidden">Hidden div</div>
<div class="clickable">Click me</div>

CSS:

.clickable { background:blue; }
.hidden {
    display:none;
}