Comment puis-je déclencher une 'mise au point' après avoir cliqué sur un élément?

Question

J'ai le balisage suivant:

<select style="display:none"> 
    <option value='1'>1</option> 
    <option vlaue='2'>2</option> 
</select> 
<input type="text" id="comboBox" /> 
<ul id="comboBoxData" style="display:none"> 
    <li id='1'>1</li> 
    <li id='2'>2</li> 
</ul> 

et le code JQuery suivant:

$(document).ready(function() { 
    $('select').each(function() { 
     var parent = this; 
     $('#comboBoxData').on('click', 'li', function() { 
      var value = $(this).prop('id'); 
      $(parent).val(value); 
      $('#comboBox').val(value); 
     }); 
    }); 
    $('#comboBox').bind('focusin', function() { 
     $('#comboBoxData').show(); 
    }); 
    $('#comboBox').bind('focusout', function() { 
     $('#comboBoxData').hide(); 
    }); 
}); 

Lorsque je clique sur un des LI de l'élément « comboBoxData » disparaît avant le déclenchement de clic se produit. Y at-il un moyen de contourner cet événement ou un autre événement que je peux utiliser à la place pour avoir le même effet qu'un focus?

Answer 1

Put mouseenter et des événements MouseLeave et modifier la valeur d'une variable globale disent Isover.

$('select').each(function() { 
    var parent = this; 
    $('#comboBoxData').on('click', 'li', function() { 
     var value = $(this).prop('id'); 
     $(parent).val(value); 
     $('#comboBox').val(value); 
     $('#comboBoxData').hide(); 
    }); 
}); 
$('#comboBoxData').mouseover(function(){ 
    isOver = true; 
}).mouseleave(function(){ 
    isOver = false; 
}); 
$('#comboBox').bind('focusin', function() { 
    $('#comboBoxData').show(); 
}); 
$('#comboBox').bind('focusout', function() { 
    if(!isOver){ 
     $('#comboBoxData').hide(); 
    } 
}); 

Answer 2

Vous ne nécessitent pas:

$('#comboBox').bind('focusout', function() { 
     $('#comboBoxData').hide(); 
}); 

utiliser à la place cet intérieur $('#comboBoxData').on('click', 'li', function() {

si vous êtes bien avec le plugin, vous pouvez simplement utiliser cette façon:

$('#menu').bind('clickoutside', function (event) { 
    $(this).hide(); 
}); 

Vous pouvez obtenir ce plugin here

Aussi, j'ai un changement d le code sans utiliser le plug-in: S'il vous plaît vérifier la réponse mise à jour:

DEMO

Answer 3

essayer avec blur() fonction

$('#comboBox').blur(function() { 
     $('#comboBoxData').hide(); 
    }); 

L'événement de flou est envoyé à un élément lorsqu'il perd le focus.

de http://api.jquery.com/blur/

Answer 4

Pas exactement élégant mais cela fonctionne.

$("body").click(function(event){ 
    if(!$(event.target).is("#comboBoxData") && !$(event.target).is("#comboBox")){  
     $("#comboBoxData").hide(); } 
}); 


$(document).ready(function() { 
    $('select').each(function() { 
     $('#comboBoxData').on('click', 'li', function() { 
     var value = $(this).prop('id'); 
       $('#comboBox').val(value); 
      $('#comboBoxData').hide(); 
     }); 
    }); 

    $('#comboBox').bind('focusin', function() { 
    $('#comboBoxData').show(); 
    }); 
});