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

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 http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element. You have there several possible solutions to address your issue. — Pierre, May 27 '12 at 17:19

score 3 · Answer 1 · answered May 27 '12 at 17:22

3

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

answered May 27 '12 at 17:22

Ram

$(this).children('input[type=checkbox]').on('click', function(){e.stopPropagation();}); // isn't this missing in the blur listener? – mtizziani Aug 22 '16 at 21:25

1 Answers1