Hide a div on click but do nothing when click on image which is inside

Question

I have a div main-wrap and an image in it.

I want to hide main-wrap when click on it. But when you click on image that is inside main-wrap I don't want to do anything. Right now I have this non-working code. When I click on image main-wrap still hides. (hidden is my class .hidden {display:none})

<div class="main-wrap" >
    <div class="photo-wrap">
        <img style="cursor:default;"  onclick = "return false;" class="img img-responsive" src = "/stat_photo/1.jpg"/>

    </div>
</div>

And I have this code

 $(document).ready(function() {
   $('.main-wrap').click(function(){$('.main-wrap').addClass('hidden')});
 });

Hey, it seems like .main-wrap is missing from your code. I guess it goes above .photo-wrap? — daxro, Feb 07 '16 at 10:54
you have added photo-wrap here, is this the original html what you are using!! — ameenulla0007, Feb 07 '16 at 10:54
dupe of http://stackoverflow.com/questions/9183381/how-to-have-click-event-only-fire-on-parent-div-not-children — Michał Perłakowski, Feb 07 '16 at 10:56
@Gothdo `$('.main-wrap').on('click', function(e) { if (e.target !== this){ return; } $('.main-wrap').addClass('hidden'); }); ` I tried this but it doesn't work too. — user2950593, Feb 07 '16 at 11:02

score 1 · Accepted Answer · edited May 23 '17 at 12:13

I ended up with this code

$('.main-wrap').on('click', function(e) {
                    $('.main-wrap').addClass('hidden');
                }).on('click', 'img', function(e) {
                    // clicked on descendant div
                    e.stopPropagation();
});

which is taken from here How to have click event ONLY fire on parent DIV, not children? (the accepted answer didn't work though)

score 1 · Answer 2 · edited Mar 23 '20 at 01:11

1

$('.main-wrap').click(function(e) {
   $(this).addClass('hidden');
}).on('click', 'img', function(e) {
  return false;
});

https://jsfiddle.net/bfwsqxko/1/

I added a click event, which extends with an exceptional click on image, which is set to return false;

edited Mar 23 '20 at 01:11

halfer

19,824
17
99
186

answered Feb 07 '16 at 11:12

ameenulla0007

2,663
1
12
15

Mir Gulam Sarwar · Answer 3 · 2016-02-07T10:56:06.957

-1

Better add an id of the image. Then replace .img with #yourid

  $(document).ready(function() {
          $('.main-wrap').not('.img').click(function(){$('.main-wrap').addClass('hidden')});
        });

edited Feb 07 '16 at 10:56

answered Feb 07 '16 at 10:54

Mir Gulam Sarwar

2,588
2
25
39

Hide a div on click but do nothing when click on image which is inside

3 Answers3