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

Question

我有一个输入字段,我尝试制作自动填充建议.代码看起来像

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

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

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

当我在输入中写入内容时,我向服务器发送请求并获取json响应,将其解析为ul-> li结构并将此ul放到我的#myresultsdiv中.

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

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

一切都很顺利,但是当我点击我的li blur()事件之前触发click()并且输入的值不会得到li的html.

我怎么能click()在之前设置活动blur()？

Answer 1

解决方案1

听mousedown而不是click.

在mousedown和blur当您按下鼠标按钮事件接二连三发生,但click只有当你释放它发生.

解决方案2

您可以preventDefault()在mousedown以阻止偷焦点下拉.轻微的优点是,当释放鼠标按钮时将选择该值,这是本机选择组件的工作方式.的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();
});