Ordre des événements avec jquery

Question

J'ai la situation suivante:

Zone de texte dans laquelle vous pouvez taper un mot-clé. L'événement keyup déclenche un script AJAX qui recherche dans la base de données des mots clés similaires. Lorsque trouvé, un DIV sera visible (show()) avec les mots-clés trouvés.

Lorsque vous cliquez sur l'un des mots-clés du div, le mot-clé sélectionné sera écrit dans la zone de texte et le div sera masqué (hide()).

Mais quand le DIV est visible et que je clique ailleurs dans le formulaire ou que je tabule hors de la zone de texte (l'événement focusout) je voudrais que le DIV soit caché.

Cela pourrait être fait avec l'événement focusout. Mais lorsque j'utilise l'événement click pour enregistrer le clic sur un mot clé dans la DIV et que j'utilise l'événement focusout pour enregistrer l'événement focusout, le problème suivant se produit: Lorsque vous cliquez sur le mot clé dans le div, l'événement focusout sera déclenché caché mais le mot-clé ne sera pas copié dans la zone de texte.

J'ai actuellement le code suivant:

/*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(); 

}) 

explaination:

#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> 

Answer 1

Essayez:

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

Answer 2

Vous pouvez utiliser la fonction flou istead de focusout ...

$("#textbox_id").live('blur',function(){ 
    $("#searchresults").hide(); 
}) 

Answer 3

Blur ne fonctionne pas (focusout est un événement jquery et ..)

J'ai réussi avec cette solution:

$(".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(); 
})