Question

I have a gallery type of interface that I’m trying to get to work, I want to be able to click outside of it to close it, however there is a div inside that contains the main elements, photos, and things to click. However as it is now when you click inside the div it closes, because it’s a child in the element that when you click it closes.

I have the divs like this:

 <div class="theater-wrapper">
     <div class="theater-container"></div>
 </div>

everything is loaded into theater-container via ajax.
When you click .theater-wrapper it should fire the event to close, however when you click theater-container it shouldn’t.

This is how I have tried to close it:

$(".theater-wrapper").click(function (event) {
     $('.theater-wrapper').hide(); 
event.stopPropagation();

  });

I have a jsfiddle showing this in action: http://jsfiddle.net/Cs8Kq/1/

Answer 1

If you want to stop propagation of the click event on .theater-container, then that’s where you need to put the command. Right now you have it applied to the .theater-wrapper click action.

$(".theater-container").click(function (ev) {
    ev.stopPropagation();
});