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

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();
}); 

Answer 2

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