javascript - JS jQuery 在 unfocus 上隐藏元素会阻止其他事件被触发

Question

我有一个搜索建议框，当搜索文本框失去焦点时我会隐藏它。这很好用，除了当我单击其中一个建议时，该建议的单击事件不会触发。

 searchText.focusout(function () { $("#search-suggestions").hide(); });

我也试过:

 searchText.focusout(function () { $("#search-suggestions").css("visibility", "hidden"); });

我尝试注释掉 hide on unfocus 代码，然后点击事件工作正常。

(基本上，模糊事件发生在可以注册建议的点击之前，这样当 clicm 注册时我试图点击的元素不在屏幕上)

点击事件代码如下:
//ajax加载后调用

$("#search-suggestions").find("a").click(function () { alert("hi"); })

我也试过在服务器上渲染它，但也失败了:

<a href="javascript: alert('hi')">Search Suggestion</a>   

如果有人有任何建议，我将不胜感激。谢谢!

Answer 1

你可以尝试定义这样的东西:

//this goes where you first binding focusout handler 
searchText.focusout(onFocusOut);

//this is a usual function
function onFocusOut() { 
    $("#search-suggestions").hide(); 
}

//this could be defined after you draw the search-suggestions control
$("#search-suggestions").hover(function() {
    //this is hover in handler; unbind focusout from searchText
    //something like that:
    $("#searchText").unbind('focusout', onFocusOut)
}, function() {
    //this is hover out handler; bind focusout to searchText
    //something like that:
    $("#searchText").bind('focusout', onFocusOut)
});

您还可以使用 live ( http://api.jquery.com/live/ ) 为 #search-suggestions 定义悬停处理程序，具体取决于您的具体需要。

这将使您的搜索建议在单击时保持可见。在点击处理程序中，您可以隐藏它们。