how to hide div with jquery when click anywhere except one div? [duplicate]

Question

I am making a search input on focus it shows a div with options with following:

$("#search").focus(function(){

$("#options").fadeIn("fast");

});

I am hiding the div back with this function

 $("#search").blur(function(){

$("#options").fadeOut("fast");

});

now the problem is even when user clicks at any checkbox in #option it hides. How I can stop it hidding when clicking checkboxes?

This question has already been answered on stackoverflow.com/questions/152975/…. You have there several possible solutions to address your issue. — Pierre
– Pierre, Commented May 27, 2012 at 17:19

Ram · Accepted Answer · 2012-05-27 17:22:38Z

3

 $("#search").blur(function(e){
   e.stopPropagation()
   $("#options").fadeOut("fast");
});

answered May 27, 2012 at 17:22

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

$(this).children('input[type=checkbox]').on('click', function(){e.stopPropagation();}); // isn't this missing in the blur listener?