jquery .not() to execute method on click of all elements but not some elements -

i want hide box on clicking anywhere in document not in few areas wrote code:

$(document).not('#color_picker,#selected_color_box,#color_picker_choose,#choose_color_box').click(function(event){                             event.preventdefault();                             $('#color_picker').css('visibility','hidden');                         }) 

but never show box, seems execute function on click anywhere whether user click on elements in .not(), while function shouldn't execute if user click on elements in not.

so doing wrong or wrong way so? please let me know suggest.

thanks

.not() filters current selection elements don't match selector. document doesn't match selector, no change made collection.

you should instead use event delegation selector matches elements not target elements.

$(document).on('click',':not(#color_picker,#selected_color_box,#color_picker_choose,#choose_color_box)',function(event){     event.preventdefault();     $('#color_picker').css('visibility','hidden'); }) 

or can compare event.target.id list of id's ignore:

var idarr = ['color_picker','selected_color_box','color_picker_choose','choose_color_box']; $(document).on('click',function(event) {     if ( idarr.indexof(event.target.id) == -1 ) {         event.preventdefault();         $('#color_picker').css('visibility','hidden');     } });