jQuery on() stopPropagation not working?
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 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.