javascript - JQuery 单击事件不能与 元素一起正常工作

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 中使用 .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 的按钮之外。