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

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/

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

Answer 4

use event.stopImmediatePropagation() It worked for me