2012-01-24 20 views
17

Me parece que no puede conseguir esto para detener la propagación de ..jQuery on() stopPropagation no funciona?

$(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

Respuesta

23

dado que está utilizando on en el elemento body y no directamente sobre img.theater el evento va a burbujear hasta body elemento y así es como funciona.

En el curso del evento se activará el evento .theater-wrapper elementos click para que pueda verlo.

Si no está creando ningún elemento dinámico, adjunte el controlador de evento click directamente en el elemento img.theater.

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

Alternativamente se puede comprobar el destino del evento click dentro .theater-wrapper elementos click manipulador y no hacer nada.

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

Todos los de mi contenido se carga en la página a través de ajax –

+0

@DylanCross - En ese caso, se debe utilizar el método alternativo que he mencionado en mi respuesta. Mantenga el manejo del evento 'on' tal como está. – ShankarSangoli

+0

Sí, todavía se cierra cuando hago clic dentro de donde no debe cerrarse cuando hago clic. –

3

La mejor manera de hacerlo es:

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

Está funcionando para mí con un acordeón y la casilla de verificación

0

En Respone a su jsFiddle @Dylan

aquí: Cuando hace clic en el punto blanco, no debe cerrarse. jsfiddle.net/Cs8Kq - Dylan

Cambio

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

a

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

y funcionará.

Lo resolví utilizando console.log (event.target) en el controlador de eventos y simplemente usando el selector que se cerró cuando hice clic en el área blanca de la que está hablando.

Hubiera comentado en su lugar, pero no tengo suficientes SO Stardust y monedas.

EDIT: como no jsfiddle.net/heNP4/