子事件的事件停止传播问题

Question

我对 jquery 停止传播有疑问。 要在我点击页面时关闭购物车模式，但购物车模式除外，我必须这样做：

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

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

        });

但是我有一个问题，我有一个 AJAX 调用来删除我的购物车 div（购物车块）中的一个项目，但是停止传播正在停止事件。

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

所以是这样的：

$('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，我不能确定这会解决你的具体情况。如果它与我的假设不同，它至少应该为您指明正确的方向。