用jQuery隐藏父div

Question

i have a problem with jQuery. I have this:

And i want that when you click on the black part of the page, the black part and the image dissapear. Here is my code:

HTML

<div id="fade-wrapper">
    <div class="row-1-big"><img src="css/images/galeria/1.jpg"></div>
    <div class="row-2-big"><img src="css/images/galeria/2.jpg"></div>
    <div class="row-3-big"><img src="css/images/galeria/3.jpg"></div>
    <div class="row-4-big"><img src="css/images/galeria/4.jpg"></div>
    <div class="row-5-big"><img src="css/images/galeria/5.jpg"></div>
    <div class="row-6-big"><img src="css/images/galeria/6.jpg"></div>
    <div class="row-7-big"><img src="css/images/galeria/7.jpg"></div>
    <div class="row-8-big"><img src="css/images/galeria/8.jpg"></div>
    <div class="row-9-big"><img src="css/images/galeria/9.jpg"></div>
</div>

JS

var r1 = $('.row-1'); //this is for when you click the thumbnail

r1.click(function(){
   $('#fade-wrapper').show(300);
   $('.row-1-big').delay(400).show();
});

the problem is that if I add this code:

$('#fade-wrapper').click(function(){
   $('this').hide();
});

when i click the image (row-1-big) it hides all and I wan't that the content hide just when I click the black part. If you don't understand just tell me.

Answer 1

Try to use e.stopPropagation() here to prevent click event fire on the parent div when you click on the child images:

$('#fade-wrapper').click(function(){
   $(this).hide();
});

$('#fade-wrapper img').click(function(e){
   e.stopPropagation();
});

Also note that you don't need to wrap this inside quotes since this is an object not a string.

Answer 2

To get the parent you would do -

$('#fade-wrapper').click(function(){
    $(this).parent().hide(); 
});

Answer 3

If you are looking to click outside the Div wrapper which is the black area then close the whole thing, here is how:

//Click on html 
$('html').click(function(){
  //hide
  $('#fade-wrapper').hide();
});

// prevent the fadeIn area to hide when clicked
$('#fade-wrapper').click(function(e){
   e.stopPropagation();
})

Answer 4

It should work if you check the div which is actually clicked with something like this :

$('#fade-wrapper').click(function(e){
    if (e.target.id === 'fade-wrapper')
        $(this).hide();
});