jQuery click事件无法与一起正常使用

Question

<button type="button" class="add-to-cart"><i class="material-icons">add_shopping_cart</i>cumpara</button>
                <button class="added add-to-cart"><i class="material-icons check">check</i><i class="material-icons clear">clear</i>Adaugat in cos</button>

我的CSS代码有两个按钮：

.add-to-cart
{
    position: relative;
    overflow: hidden;
    line-height: em(48);
    background: complement($rodie);
    border: none;
    color: $gray-100;
    text-transform: uppercase;
    height: em(48);
    width: 100%;
    font-size: em(18);
    display: inline-block;
    transition: all 250ms ease-out;
    &.clicked
    {
        transform: translateX(-100%);
    }
    &:hover
    {
        background: complement(darken($rodie, 10%));
    }
    i
    {
        position: absolute;
        right: 0;
        top: 0;
        font-size: em(18);
        height: em(48);
        width: em(48);
        line-height: em(44);
    }
}

.added
{
    position: absolute;
    right: -100%;
    top: 90%;
    z-index: 22;
    background: $verde-jungla;
    &:hover
    {
        background: $verde-jungla;
    }
    &.clicked
    {
        transform: translateX(-100%);
    }
    .check
    {
        left: 0;
    }
}

.clear
{
    transition: all 100ms ease-in-out;
    height: em(48);
    width: em(48);
    right: 0;
    background: desaturate(red, 30%);
    &:hover
    {
        background: desaturate(darken(red, 10%), 30%);
    }
}

我希望该按钮通过转换第二个按钮来响应单击事件，该按钮具有一个附加的图标和一条消息（通知用户该产品已添加到购物车）。 第一次过渡有效。 当我单击该按钮时，另一个按预期出现，但是当按下清除的“按钮”（具有清除类的<i> ）时，它不起作用。

这是JQuery代码：

$('.add-to-cart').click(function(){
  $('.add-to-cart').addClass("clicked");
});

$('.clear').click(function(){
event.preventDefault();
  $('.add-to-cart').removeClass("clicked");
});

请记住，如果我更改了第二单击事件的选定元素，则该过程将正常进行。

Answer 1

在.add-to-cart车内.add-to-cart .clear按钮会出现问题。 单击.clear ，同时单击.add-to-cart 。

您确实添加了event.preventDefault ，但是您不只是想阻止默认值。 您还需要防止事件“冒泡”。 另外，变量event不存在，您需要将其添加为第一个参数的名称。

尝试：

$('.clear').click(function(event){
  event.stopPropagation();// Stop bubbling up
  event.preventDefault();
  $('.add-to-cart').removeClass("clicked");
});

但是更好的解决方案是将.clear移至具有.add-to-car的按钮之外。

Answer 2

   <button type="button" class="add-to-cart"><i class="material-icons">add_shopping_cart</i>cumpara</button>
   <button class="added add-to-cart"><i class="material-icons check">check</i><i class="material-icons clear" style=" padding: 0 10px;">clear</i>Adaugat in cos</button>




 $('.add-to-cart').click(function(){
   $('.add-to-cart').addClass("clicked");
 });

 $('.clear').click(function(event){
   event.stopPropagation();
   event.preventDefault();
   $('.add-to-cart').removeClass("clicked");
 });