Hide div when clicking document but not when clicking a particular link

Question

$(document).click( function () {

    $('#my_div').fadeOut(350);

});

I want to hide this div when user clicks into the document but not when he clicks in e particular link for example #my_link. How can i do this? Thanks

Answer 1

A simple way is to add an event to your link and use stopPropagation :

$('#my_link').click(function(e){
     e.stopPropagation();
})

Answer 2

Pass the event object to your click function and check for the id:

$(document).click( function (event) {
    var idName = event.target.id;
    if(idName == "my_link"){
        return false;
    };
    $('#my_div').fadeOut(350);

});

This way you don't have to add an extra Event Listener :)

This method is also extensible, must you wish to include other links in the future...

Answer 3

使用stopPropagation（ http://api.jquery.com/event.stopPropagation/ ）

$('a#my_link').click(function(event) { event.stopPropagation(); });