事件停止与儿童事件传播问题

我有jquery停止传播的问题。要关闭车模式时，我除了在车模式在页面上点击，我不得不这样做：事件停止与儿童事件传播问题

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

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

     });

但我有一个问题，我有一个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>

来源

2017-04-03 Alexandre

您能否展示您的HTML结构？ – 4castle

是的，我更新了帖子，谢谢:) – Alexandre

而不是你在做什么（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，我不能确定这将解决你的具体情况。如果它与我所设想的不同，至少应该指向正确的方向。

来源

2017-04-03 09:51:04

感谢您的回答，但它不起作用，因为如果您在其他课程中点击购物车内部，它会关闭购物车。 – Alexandre

看我的编辑。只要你总是点击'mycart'的一个孩子（这意味着所有的可点击区域实际上是'mycart'容器的一个孩子），这将适用于任何事情。如果你有一些可以直接点击的'mycart'部分（即点击它们时，事件目标是'mycart'而不是'mycart'的子项，那么你必须添加'或'在if语句中处理 –

非常感谢！它的工作原理:) – Alexandre

事件停止与儿童事件传播问题

回答

相关问题