jQuery on() stopPropagation not working?

Question

I can't seem to get this to stop propagating..

  $(document).ready(function(){
      $("body").on("click","img.theater",function(event){ 
          event.stopPropagation();    
          $('.theater-wrapper').show();
      }); 

       // This shouldn't fire if I click inside of the div that's inside of the 
       // `.theater-wrapper`, which is called `.theater-container`, anything else it should.
       $(".theater-wrapper").click(function(event){
           $('.theater-wrapper').hide();
       }); 
  });

Refer this jsfiddle

Kreg

Answer 1

Since you are using on on the body element and not directly on img.theater the event is going to bubble up to body element and that is how it works.

In the course of event bubbling .theater-wrapper elements click event will be triggered so you are seeing it.

If you are not creating any dynamic elements then attach the click event handler directly on img.theater element.

$("img.theater").click(function(event){
    event.stopPropagation();    
    $('.theater-wrapper').show();
}); 

Alternatively you can check the target of the click event inside .theater-wrapper elements click handler and do nothing.

$(".theater-wrapper").click(function(event){
    if ($(event.target).is('img.theater')){
         event.stopPropagation();
         return;
    }
    $('.theater-wrapper').hide();
}); 

Monmouthshire

All of my content is loaded into the page via ajax – Kreg

@DylanCross - In that case you should use the alternative approach which I mentioned in my answer. Keep the on event handling as it is. – Monmouthshire

Yeah, it still closes when I click inside of where it shouldn't close when I click. – Kreg

Can you check what console.log($(event.target)) gives you? – Monmouthshire

img and div.image-wrapper and div.theater-wrapper – Kreg

Isn't there theater class to img element? – Monmouthshire

theater class is part of img, yes, and your updated answer still doesn't work – Kreg

If the class is present then $(event.target).is('img.theater') should return true – Monmouthshire

Here: When you click the white spot it shouldn't close. jsfiddle.net/Cs8Kq – Kreg

This solution that uses event.target worked for me using jquery on() with 'transitionend' as my event. – Niche

Answer 2

use event.stopImmediatePropagation() It worked for me

Fraga

Answer 3

The best way to do that is :

$(".theater-wrapper").click(function(event){
    if (!$(event.target).is('img.theater')){
        $('.theater-wrapper').hide();
    }
}); 

It's working for me with an accordion and checkbox

Freeness

Answer 4

In respone to your jsfiddle @Dylan

Here: When you click the white spot it shouldn't close. jsfiddle.net/Cs8Kq - Dylan

Change

if ($(event.target).is('img.theater')){

to

if ($(event.target).is('.theater-container')){

and it will work.

I solved this by using console.log(event.target) in the event handler and just using the selector that got logged out when I clicked the white area you're speaking of.

I would've commented instead, but I don't have enough SO stardust and coins.

EDIT: Like this jsfiddle.net/heNP4/

Zabaglione