Jquery using focusout & on click together doesn't work

Question

I am trying to achieve the result when i am typing inside input the list will drop down. if the list is clicked then will give out an alert. in the same time if the input is focus out , it will hide the list. But the problem is when on click , it doesn't work.

$("input").on("keyup",function(){
$(".abc li").show();
});
$(".abc li").on("click",function(){
    alert("123");
});
$("input").focusout(function(){
$(".abc").find("li").hide();
});

Reference to my code http://jsfiddle.net/8t7erade/

possible duplicate of [jQuery .focusout / .click conflict](http://stackoverflow.com/questions/13980448/jquery-focusout-click-conflict) — Marcel, Aug 15 '14 at 23:02

score 3 · Answer 1 · answered Aug 15 '14 at 22:56

Your click event is never getting called because the li is hidden by your focusout event before it can be triggered.

You could set a timeout to allow for the click to be registered:

$("input").focusout(function () {
    setTimeout(function () {
        $(".abc").find("li").hide()
    }, 100)
});

demo

score 0 · Answer 2 · answered Aug 15 '14 at 22:56

How about setting (short) time out on blur (focus out)?

Like this:

$("input").on("keyup",function(){
$(".abc li").show();
});
$(".abc li").on("click",function(){
    alert("123");
});
$("input").focusout(function(){
    setTimeout(function(){$(".abc").find("li").hide();}, 150);//i set 150 just as example

});

Problem is that blur occurs first, and at that time elements got hidden and mouse event is passed to other (visible) element.

Jquery using focusout & on click together doesn't work

2 Answers2