JQuery와 클릭 이벤트는 <i> 요소가 제대로 작동하지

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>)을 누르면 작동하지 않습니다. 내가 두 번째 클릭 이벤트의 선택된 요소를 변경하는 경우, 프로세스가 잘 작동하는지

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

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

가 유의 사항 :

이 JQuery와 코드입니다.

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"); 
}); 

하지만 훨씬 더 나은 솔루션 .add-to-car이있는 버튼의 .clear 외부로 이동하는 것입니다.

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"); 
});