jQuery focusOut except if

Question

I simply want to hide a div, if a text box loses focus, unless, the user clicks in another certain div. If user clicks that particular div, then the focusout doesn't trigger the div.box being hidden.

Below is code with my pseudocode commenting. Any ideas?

textInput.focusout(function() {
    // So long you didn't click div.stop, then
        $('div.box').hide();
});

Answer 1

var flag = false;

$('div.stop').click(function() {flag = true;});
textInput.focusout(function() {
    // So long you didn't click div.stop, then
    if(!flag)
        $('div.box').hide();
});

If you wanted to avoid adding the flag variable, you could use jQuery's .data to store the flag value against e.g. the div.stop element, e.g:

$('div.stop').click(function() {$(this).data('clicked', true);});

// ...

    if(!$('div.stop').data('clicked'))
// ...

EDIT

If you want to allow for the situation where the text box has focus, and you then click on div.stop, and you don't want it to hide, then you could try something like:

$('div.stop').click(function() {$('div.box').stop();});
textInput.focusout(function() {
    // So long you didn't click div.stop, then
    $('div.box').delay(200).hide();
});

Answer 2

$(document).bind('click',function(e) {
  if ($(e.target).closest('div.box').length) return;
  $('div.box').hide();
});

Try this!

Answer 3

var flag = false;
$('#inputID').blur(function(){
   $('div.box').toggle(flag);       
});

$('#someDIVid').click(function(){
    flag = true;
});

simple demo

added notes:

.toggle( showOrHide )

showOrHide A Boolean indicating whether to show or hide the elements. If this parameter is true, then the matched elements are shown; if false, the elements are hidden.