jQuery остановить событие, всплывающее при входном методе размытия?

Question

У меня проблема с jQuery и надеюсь на вашу помощь. Я долго искал решение, но ничего не придумал.

У меня есть поле ввода, и когда я нажимаю на него (фокус), в DOM появляется какой-то div с определенным идентификатором, а когда я щелкаю где-то еще (размытие), этот div скрывается.

Что мне нужно сделать, это когда я нажимаю на этот конкретный div, чтобы он оставался видимым и не скрывался.

Так как я могу это сделать?

Спасибо и извините за мой плохой английский.

$(function(){

    $('input').focus(function() {
        $('#visible-block').show();
    });

    $('input').blur(function() {
        $('#visible-block').hide();
    });

});

У меня есть небольшая демонстрация для этого: http://jsfiddle.net/uJ8nW/

Answer 1

Просто проверьте, не наведен ли ваш курсор на div, когда вы потеряли фокус на вводе, прежде чем скрывать его:

$('input').blur(function() {
    if(!$('#visible-block').is(":hover"))
        $('#visible-block').hide();
});

jsfiddle

Изменить: После прочтения комментариев, вот новое решение без необходимости функции размытия:

$(function(){

    $('input').focus(function() {
        $('#visible-block').show();
    });

    $('#visible-block').blur(function() {
         $('#visible-block').hide();
    });

    $('html').click(function() {
        //Hide the menus if visible
        $('#visible-block').hide();
    });

     $('input').click(function(event){
        event.stopPropagation();
    });

    $('#visible-block').click(function(event){
        event.stopPropagation();
    });

});

Вот обновление jsfiddle

Answer 2

Возможно, не лучшее решение, но может соответствовать вашим потребностям.

$(function(){

$('input').focus(function() {
    $('#visible-block').show();
});

$('input').blur(function() {
    if (!$('#visible-block').is(":hover"))
        $('#visible-block').hide();
}); 

$('#wrapper').click(function() {
    if (!$('#visible-block').is(":hover") && !$('input').is(":hover"))
        $('#visible-block').hide();
}); 
});