Question

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

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

我也尝试过：

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

我尝试在无焦点代码上注释掉隐藏，然后点击事件就可以了。

（基本上，模糊事件发生在点击建议之前就可以注册，这样当我的注册表单时我尝试点击的元素不在屏幕上）

这是点击事件代码：
//在ajax加载后调用

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

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

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

如果有人有任何建议我会很感激。谢谢！

Answer 1

尝试让它变得不可见。

将$('#my_search_box').hide();更改为$('#my_search_box').css('visibility','hidden');

如果您有周围的DOM元素需要像搜索框一样消失，您也可以为它分配一个绝对位置。

Answer 2

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

//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的悬停处理程序，具体取决于您需要的内容。

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

Answer 3

尝试使用.css（'visibility'，'hidden'）而不是.hide，它使用display：none。

unjocus上的JS jQuery隐藏元素会阻止其他事件被触发

3 个答案: