jquery 的事件顺序

Question

我有以下情况：

您可以在其中输入关键字的文本框。 keyup 事件触发一个 AJAX 脚本，该脚本在数据库中查找类似的关键字。找到后，DIV 将与找到的关键字一起可见 (show())。

当单击 div 中的关键字之一时，所选关键字将被写入文本框中，并且 div 将被隐藏 (hide())。

但是，当 DIV 可见并且我单击表单中的其他位置或按 Tab 键移出文本框（焦点事件）时，我希望隐藏 DIV。

这可以通过 focusout 事件来完成。但是，当我使用 click 事件注册 DIV 中关键字的点击并使用 focusout 事件注册 focusout 事件时，会出现以下问题：当单击 div 中的关键字时，将触发 focusout 事件，因此我的 DIV 将被触发隐藏，但关键字不会复制到文本框中。

我目前有以下代码：

/*click on found "link with class f_link" in DIV*/
$(".f_link").live('click', function(){

    $newval=$(this).attr("id");
    $("#textbox_id").val($newval);
    $("#searchresults").hide();
})


/*when losing focus textbox hide DIV */
$("#textbox_id").focusout(function(){
    $("#searchresults").hide();

})

解释：

#textbox_id : id of textbox
#searchresults: id of DIV with found results
.f_link : class of "link" in div searchresults like <span class="f_link" id="result1>result 1</span>

Answer 1

尝试：

/*when losing focus textbox hide DIV */
$("#textbox_id").blur(function(){
    $("#searchresults").hide();
})

Answer 2

模糊不起作用（focusout也是jquery中的一个事件..）

我用这个解决方案管理它：

$(".f_link").live('click', function(){
    $("#textbox_id").val($newval=$(this).attr("id"));
    $("#searchresults").hide();
})

$mouseover=false;
$("#searchresults").live('mouseover', function(){
    $mouseover=true;
})

$("#searchresults").live('mouseout', function(){
    $("#textbox_id").focus();
    $mouseover=false;
})



$("#textbox_id").focusout(function(){
    if ($mouseover) {
        return;
    }
    $("#searchresults").hide();
})

Answer 3

您可以使用模糊功能代替焦点...

$("#textbox_id").live('blur',function(){
     $("#searchresults").hide();
})