jQuery:fire click（）在blur（）事件之前

Question

我有一个输入字段，在那里我试图提出自动完成建议。代码看起来像

<input type="text" id="myinput">
<div id="myresults"></div>

在输入的blur（）事件中，我想隐藏结果的div:

$("#myinput").live('blur',function(){
     $("#myresults").hide();
});

当我写一些东西到我的输入我发送请求到服务器并得到json响应，解析成ul-

当我点击这个解析的li元素时，我想将值从li设置为input并隐藏#myresultsdiv

$("#myresults ul li").live('click',function(){
     $("#myinput").val($(this).html());
     $("#myresults").hide();
});

一切都很好，但是当我单击我的liblur（）事件在单击（）之前触发，并且输入的值不会得到li的html。

如何在blur（）之前设置click（）事件？

Answer 1

我遇到了这个问题，使用mousedown对我来说不是一个选择。

我通过在处理函数中使用setTimeout解决了这个问题

        elem1.on('blur',function(e) {

            var obj = $(this);

            // Delay to allow click to execute
            setTimeout(function () {
                if (e.type == 'blur') {

                  // Do stuff here

                }
            }, 250);
        });

        elem2.click( function() {
            console.log('Clicked');
        });

Answer 2

$(document).on('blur', "#myinput", hideResult);

$(document).on('mousedown', "#myresults ul li", function(){
     $(document).off('blur', "#myinput", hideResult); //unbind the handler before updating value
     $("#myinput").val($(this).html()).blur(); //make sure it does not have focus anymore
     hideResult(); 
     $(document).on('blur', "#myinput", hideResult);  //rebind the handler if needed
});

function hideResult() {
     $("#myresults").hide();
}

不停摆弄

Answer 3

听mousedown而不是单击。

按下鼠标按钮时，mousedown和blur事件会一个接一个地发生，但单击仅在松开鼠标按钮时才会发生。

您可以在mousedown中preventDefault（）阻止下拉菜单窃取焦点。稍有优势的是，释放鼠标按钮时将选择该值，这就是原生选择组件的工作方式。JSFIDLE

js prettyprint-override">$('input').on('focus', function() {
    $('ul').show();
}).on('blur', function() {
    $('ul').hide();
});

$('ul').on('mousedown', function(event) {
    event.preventDefault();
}).on('click', 'li', function() {
    $('input').val(this.textContent).blur();
});