JS jQuery Сокрытие элемента при расфокусировке останавливает запуск других событий

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

Вы можете попытаться определить что-то вроде этого:

//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 2

Попробуйте просто сделать его невидимым.

Изменить $('#my_search_box').hide(); на $('#my_search_box').css('visibility','hidden');

Если у вас есть окружающие элементы DOM, которые должны действовать так, как если бы поле поиска исчезло, вы можете просто назначить ему абсолютную позицию.

Answer 3

Попробуйте использовать .css («видимость», «скрытый») вместо .hide, который использует display: none.