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();
});