Question

I am making an image viewer. When I click on an image, it fades in the “overlay” Div with the image inside. But with the code below, when I click on the image, the div fades in but it immediately fades out without me re-clicking. What is wrong with me code?

I believe I need to put that “body click” line inside the first function but it doesn’t work. How can I make such that this “body click” happens only after the overlay fades in?

Thanks in advance.

$('.pic').click(function(){
        $('#overlay').html("<img class='enlarged_pic' src='" + (this).src + "'>").fadeIn();
        }); 

$('body').click(function(){
        $('#overlay').fadeOut();
        });     

Answer 1

You need to add e.stopPropagation() to your first handler. What happens is that the click event is bubbling from your .pic up to the body, triggering both handlers when you only want one. .stopPropagation() blocks the event from bubbling any higher up the DOM.

$('.pic').click(function(e){ // don't forget that 'e'
    e.stopPropagation();
    $('#overlay').html("<img class='enlarged_pic' src='" + (this).src + "'>").fadeIn();
}); 

$('body').click(function(e){
    $('#overlay').fadeOut();
});  

http://jsfiddle.net/VQkNa/

You may also want to make it so that clicking on the overlay itself doesn’t fade the overlay. This is easily done by detecting the target of a click:

$('body').click(function(e) {
    if (e.target.id !== "overlay") {
        $('#overlay').fadeOut();
    };
});​

http://jsfiddle.net/VQkNa/1/