Порядок событий с jquery - PullRequest
Новая
       24

Порядок событий с jquery

0 голосов
/ 20 июля 2011

У меня следующая ситуация:

Текстовое поле, в котором вы можете ввести ключевое слово. Событие keyup запускает сценарий AJAX, который ищет в базе данных похожие ключевые слова. При обнаружении DIV будет отображаться (show()) с найденными ключевыми словами.

При нажатии на одно из ключевых слов в div выбранное ключевое слово будет записано в текстовое поле, а div будет скрыт (hide()).

Но когда DIV виден, и я щелкаю где-нибудь в форме или вкладке из текстового поля (событие focusout), я бы хотел, чтобы 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>

Ответы [ 3 ]

0 голосов
/ 20 июля 2011

Вы можете использовать функцию размытия вместо фокусировки ... 

$("#textbox_id").live('blur',function(){
     $("#searchresults").hide();
})
0 голосов
/ 21 июля 2011

Размытие не сработало (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();
})
0 голосов
/ 20 июля 2011

Попробуйте: 

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