자식 이벤트에 대한 이벤트 중지 전파 문제

Question

jquery 중지 전파 문제가 있습니다. 내가 카트 모달 제외하고 페이지를 클릭하면 은 카트 모달을 닫으려면, 내가해야 할 일을했을 :

 $('html').click(function() { 
      $('.cart-block').css('display','none'); 
     }); 

     $('.mycart, .cart-block').click(function(event){ 
      event.stopPropagation(); 

     }); 

을하지만 난이 문제가, 내가 (내 카트 DIV 내에서 항목을 삭제하는 AJAX 호출이 카트 블록) 정지 전파는 이벤트를 중지합니다.

$(document).on('click', '.deleteItem', function() { 
    //ajax call 
}); 

나를 도와 줄 사람이 있습니까? 덕분에 많은 (내 영어 죄송합니다)

편집 : HTML 구조

<div class="center cart mycart" > 
      //icon and cart item counter 
      </div> 

     <div id="cartcaption" class="cart-block"> 
    //modal : content of the cart 
<div class="productsPanier"> 
<span id="{{$cart->rowId}}" class="deleteItem">delete</span> 
    </div> 
</div> 

Answer 1

대신에 당신이 (한 정지 전파와 2 핸들러 바인딩) 무슨 일을하는지, 단지 바인드 // 버튼 카트 하나의 핸들러 및 이벤트의 대상 여부를 확인 클래스 .cart 블록을 가지고

그래서 이런 식으로 뭔가 :

$('html').click(function(event) { 
    if (!$(event.target).hasClass('cart-block')) 
     $('.cart-block').css('display','none'); 
}); 

다음과 같은 부분을 제거

$('.mycart, .cart-block').click(function(event){ 
    event.stopPropagation(); 
}); 

귀하의 이벤트가 제대로 전달되고 '디스플레이 : 없음;' 당신이 카트 블록 요소에

편집을 클릭하는 경우 카트 블록에 추가되지 않습니다 : 가장 바깥 쪽 클래스 'mycart'라는 이름의 경우, 당신은 다른 방법이처럼 시도 할 수 :

$('html').click(function(event) { 
    if (!($(event.target).closest('.mycart').length)) 
     $('.cart-block').css('display','none'); 
}); 

무엇 이 작업은 클릭 대상 요소에 'mycart'클래스가있는 부모 요소가 있는지 확인하는 것입니다. 이 솔루션은 장바구니 내부를 클릭하면 클래스 'mycart'가있는 컨테이너가 있다고 가정합니다. 분명히, 귀하의 DOM을 보지 않고서도 이것이 당신의 구체적인 경우를 해결할 수 있을지 확신 할 수 없습니다. 내가 생각한 것과 다른 점이라면 최소한 올바른 방향으로 당신을 가리켜 야합니다.