jQuery:在blur()事件之前触发()

I have an input field, where I try to make autocomplete suggestion. Code looks like

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

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

On input's blur() event I want to hide results' div:

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

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

When I write something into my input I send request to server and get json response, parse it into ul->li structure and put this ul to my #myresults div.

当我在输入中写入一些内容时，我向服务器发送请求并获得json响应，将其解析为ul->li结构，并将这个ul放到#myresults div中。

When I click to this parsed li element I want to set value from li to input and hide #myresults div

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

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

Everything is going good, but when I click to my li blur() event fires before click() and input's value don't get li's html.

一切都很好，但是当我单击我的li blur()事件时，单击()，然后输入的值没有得到li的html。

How can I set up click() event before blur()?

如何在blur()之前设置click()事件?

5 个解决方案

#1

Solution 1

Listen to mousedown instead of click.

听mousedown而不是点击。

The mousedown and blur events occur one after another when you press the mouse button, but click only occurs when you release it.

当您按下鼠标按钮时，鼠标向下和模糊事件一个接一个地发生，但是单击只在您释放它时发生。

Solution 2

You can preventDefault() in mousedown to block the dropdown from stealing focus. The slight advantage is that the value will be selected when the mouse button is released, which is how native select components work. JSFiddle

您可以在mousedown中preventDefault()以阻止下拉菜单窃取焦点。稍微的好处是，当鼠标按钮被释放时，值将被选中，这就是本机select组件的工作方式。JSFiddle

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

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

FIDDLE

小提琴

#3

I faced this issue and using mousedown is not an option for me.

我遇到了这个问题，使用mousedown不是我的选择。

I solved this by using setTimeout in the handler function

我在处理程序函数中使用了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');
        });

#4

I just answered a similar question: https://*.com/a/46676463/227578

我刚刚回答了一个类似的问题:https://*.com/a/46676463/227578

An alternative to the mousedown solutions is have it ignore blur events caused by clicking specific elements (i.e., in your blur handler, skip the execution if it's a result of clicking a specific element).

mousedown解决方案的另一种选择是让它忽略由单击特定元素引起的模糊事件(例如。，在blur处理程序中，如果是单击某个特定元素的结果，则跳过执行)。

$("#myinput").live('blur',function(e){
     if (!e.relatedTarget || !$(e.relatedTarget).is("#myresults ul li")) {
         $("#myresults").hide();
     }
});

#5

Mousedown solutions does not work for me, when I click on non button elements. So here is what I've done with blur function in my code:

当我点击非按钮元素时，Mousedown解决方案对我不起作用。这就是我在代码中对blur函数所做的:

.on("blur",":text,:checkbox,:radio,select",function() {
/*
* el.container 
* container, you want detect click function on.
*/
            var outerDir = el.container.find(':hover').last();
            if (outerDir.length) {
                if ($.inArray(outerDir.prop('tagName'), ["A","SELECT"] ) != -1 || outerDir.prop('type') == 'button' || outerDir.prop('type') == 'submit') {
                    outerDir.click();
                }
                if (outerDir.prop('type') == 'checkbox') {
                    outerDir.change();
                }
                return false;
            }
/*          
* YOUR_BLUR_FUNCTION_HERE;
*/
});