Question

Below is html

<div class="radio_tab"><span>Ad View</span>
    <ul>
        <li>Ad View</li>
        <li>Page View</li>
    </ul>
</div>

My javascript is

$("div").not('.radio_tab').click(function(){
        alert('hi');

});

and also i tried

$("div:not(.radio_tab)").click(function(){
        alert('hi');

});

I am showing dropdown on click of span and it will hide on clicking on span/ul.
But problem is, i want to hide dropdown onclicking outside div.radio_tab.

I appreciate all your comments

Answer 1

Both of those selectors will find all divs that do not have the class radio_tab, and apply click handlers to them. That’s probably amazingly inefficient, on top of not being what you want to do. The thing it seems like you’re trying to do ($("*:not('div.radio_tab')")) would be even worse.

One alternate approach might be to apply a click handler to the body of the document, and test the event’s target to see whether it’s div.radio_tab, or one of its children. If not, then hide the div and unbind the event handler. Something along these lines (code written here, and not tested!):

// attach the event handler to the body, where it will hear about
// any clicks that don't have default behavior (like links);
// use a namespaced event, so that it can be easily removed
$(document.body).bind("click.radio_tab",function(evt){
  // make sure the click is outside the div in question
  if( $(evt.target).closest("div.radio_tab").length === 0 ) {
    // hide the div, or whatever else needs to be done
    $("div.radio_tab").hide();
    // unbind the event, since it's no longer needed
    $(this).unbind("click.radio_tab");
  }
});