jquery - 如何将模糊事件绑定(bind)到实时点击事件？

Question

我有这个功能:

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

基本上，我希望 #results_container 在模糊时隐藏，除非单击了 .result 类的元素。

以上功能不起作用

Answer 1

您的代码有问题:

您想要做的是在另一个事件的事件处理程序中的 .result 上附加一个 click 事件处理程序(blur )。

除了附加这个基本上不执行任何操作的 click 处理程序之外，您的代码不会执行任何操作。

<小时/>

简单选项:

首先会触发 blur 事件，然后再触发 .results 上的 click，因此这不是一个简单的情况。

最简单的方法是:

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

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

jsFiddle Demo

因此，只需隐藏容器，单击即可再次显示它。眨眼间即可得到结果。

<小时/>

超时选项:

我能想到的另一个选项是在触发 blur 时设置一个小的超时，并在 .results 的点击事件上取消它。在此示例中，我使用 .data() 函数将超时存储在 body 上，您可以将其存储在更符合逻辑的元素上，这只是一个演示:

$('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