DIV losing focus when clicking on elements inside it

Question

Why does the DIV lose focus when i click on elements inside it? I have an JS that hides the DIV when it loses focus. But that should not happen when clicking on elements inside the DIV. It needs to be done with .on because there is some ajax loading going on.

$(document).on('focusout', '#geomodal', function(e) {
    console.log('.focusout');
});

<div id="geomodal" tabindex="-1">
    <input value="109" name="districts[]" type="checkbox">
    <label>Bla</label>
    <br>
    <input value="152673" name="districts[]" type="checkbox">
    <label>Blabla</label>
    <br>
</div>

http://jsfiddle.net/2g41su81/2/

jQuery Documentation:

The focusout event is sent to an element when it, or any element inside of it, loses focus.

Answer 1

Only one element has focus at a time - if an input has focus, your div doesn't. After losing focus, check if the newly-focused element is your div or a child, and don't hide it in that case.

$(document).on('focusout', '#geomodal', function (e) {
    setTimeout(function(){
        var focus=$(document.activeElement);
        if (focus.is("#geomodal") || $('#geomodal').has(focus).length) {
            console.log("still focused");
        } else {
            console.log(".focusout");
        }
    },0);
});

The setTimeout is necessary to allow the new element to gain focus before doing the check.

http://jsfiddle.net/2g41su81/5/

Answer 2

you can also use e.relatedTarget to get the element which caused the focusout to be triggered and do handling according to that!