Как связать событие размытия с событием живого клика? - PullRequest
Новая
       21

Как связать событие размытия с событием живого клика?

4 голосов
/ 17 июня 2011

У меня есть эта функция: 

$('input#auto_results').bind('blur', function(e) {
    $('.result').bind('click', function() {
        return;
    });
    $('#results_container').hide();                                       
});

По сути, я бы хотел, чтобы #results_container скрывал при размытии, ЕСЛИ не нажимается элемент с классом .result.

Вышеприведенная функция выполняетне работает

1 Ответ

4 голосов
/ 17 июня 2011

Проблема с вашим кодом:

Что вы пытаетесь сделать, это подключить обработчик события click к .result в обработчике события другого события (blur).

Ваш код ничего не будет делать, кроме присоединения этого обработчика click, который в основном ничего не делает.

Простой параметр:

Событие blur будет инициировано первыми click на .results секунду, так что это непростая ситуация.

Самый простой способ сделать это: 

$('input#auto_results').blur(function () {
    $('#results_container').hide();
});

$('.result').click(function () {
    $('#results_container').show();
});

jsFiddle Demo

Так что, просто скрыв контейнер, нажмите, чтобы показать его снова.В результате происходит небольшое мигание.

Параметр тайм-аута:

Другой вариант, о котором я могу подумать, - это установить небольшой тайм-аут при срабатывании blur и событие щелчка.results, отмени это.В этом примере я храню тайм-аут на body с помощью функции .data(), вы можете сохранить его на более логическом элементе, это просто демонстрация: 

$('input#auto_results').blur(function () {
    var cucc=setTimeout(function () {
        $('#results_container').hide();
        $('body').removeData('blurTimeout');
    }, 100);
    $('body').data('blurTimeout', cucc);
});

$('.result').click(function () {
    var cucc=$('body').data('blurTimeout');
    if (typeof cucc != 'undefined') {
        clearTimeout(cucc);
    }
});

jsFiddle Demo

...