Question

I have a search suggestion box that I hide when the search text box loses focus. This works great, except that when I click one of the suggestions the click event for that suggestion does not fire.

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

I also tried:

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

I tried commenting out the hide on unfocus code and the click events then worked fine.

(Basically, the blur event happens before the click on the suggestion can be registered, such that the element I attempted to click is not on the screen when the clicm does register)

here’s the click event code:
//Called after the ajax load

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

I also tried rendering this on the server but it failed as well:

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

If any one has any suggestions I would appreciate it. Thanks!

Answer 1

You could try to define something like this:

//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)
});

you could also use live (http://api.jquery.com/live/) to define hover handler for #search-suggestions, depending on what exactly you need.

This will make your search suggestions stay visible when clicking them. In click handler you can then hide them.