execute jquery command unless user clicks on a div

Question

I have a user search bar that creates a div containing the relevant users and it disappears when you focus out. However I don't want to focus out if I click on the user list div. Is this possible to achieve?

application.js:

$(function() {
   $("#user_header_search_form input").focusout(function() {
      $('#header_user_list').html('');
   });
});

$('#header_user_list').html(''); I don't want to run this link if the user clicks '#header_user_list'

Answer 1

An alternativa approach may be:

 $(document).click(function(event){

    var clicked = $(event.target);

    //if the clicked element is not son of the input or the list, clear the list.
    if(clicked.closest("#user_header_search_form input,#header_user_list").size() == 0)
    $('#header_user_list').html('');

 });

Another option is setting a delay before clearing the list. This will work if the user must pick only one item from the list:

 $("#user_header_search_form input").focusout(function() {
     setTimeout(function(){
        $('#header_user_list').html('');
     },50);
 });

Hope it helps!