jQuery on() stopPropagation nie działa?

Question

I nie może wydawać się uzyskać to, aby zatrzymać rozmnożeniowego ..

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

Ponieważ używasz on na elemencie body a nie bezpośrednio na img.theater zdarzenie będzie bulgotać do body element i tak to działa.

Podczas trwania wydarzenia będą się pojawiać bąbelki .theater-wrapper elementy click wydarzenie zostanie uruchomione, więc widzisz je.

Jeśli nie tworzysz żadnych elementów dynamicznych, dołącz obsługę zdarzeń kliknięcia bezpośrednio do elementu img.theater.

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

Alternatywnie można sprawdzić cel imprezy click wewnątrz .theater-wrapper elementów click obsługi i nic nie robić.

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

Answer 2

Najlepszym sposobem na to jest:

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

To działa na mnie z akordeonem i wyboru

Answer 3

W respone do jsfiddle @Dylan

tutaj: Po kliknięciu białej plamki nie powinno się zamykać. jsfiddle.net/Cs8Kq - Dylan

Zmień

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

do

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

i będzie działać.

Rozwiązałem to za pomocą konsoli .log (event.target) w module obsługi zdarzenia i po prostu używając selektora, który został wylogowany po kliknięciu białego obszaru, o którym mówisz.

Chciałbym skomentować zamiast tego, ale ja nie mam tyle gwiezdnego pyłu i monet.

EDIT: Jak to jsfiddle.net/heNP4/