將按鈕添加到新元素

Question

你能幫我解決一個小問題嗎？

我有一些數字。點擊後，選定的圖複製到另一個div（籃子）。 在籃子裏應該會出現新的按鈕。但在我的解決方案中，每次點擊後都會再次出現此按鈕。 我該如何解決這個問題？ 謝謝，對不起我的英語

此代碼

<div class="products__list__items"> 
    <div class="products__list__item row"> 
     <figure class="product first" data-class="first"> 
      <img src="https://www.tineye.com/images/robot-search-header.png" alt="product1" class="product__img"> 
      <figcaption class="product__title">One</figcaption> 
     </figure> 
    </div> 
    <div class="products__list__item row"> 
     <figure class="product first" data-class="first"> 
      <img src="https://www.tineye.com/images/robot-search-header.png" alt="product1" class="product__img"> 
      <figcaption class="product__title">Two</figcaption> 
     </figure> 
    </div> 
    <div class="products__list__item row"> 
     <figure class="product first" data-class="first"> 
      <img src="https://www.tineye.com/images/robot-search-header.png" alt="product1" class="product__img"> 
      <figcaption class="product__title">Three</figcaption> 
     </figure> 
    </div>   
</div> 
<div class="basket"> 

</div> 

jQuery代碼

$(document).ready(function() { 
    var addToBasket = function() { 
     var that = $(this); 
     if(!that.hasClass('added')) { 
      that.clone().appendTo($('.basket')); 
      that.addClass('added'); 
     }; 
     $('.basket .product').append('<button>x</button>'); 
    }; 
    $(document).on("click",".products__list__item .product",addToBasket); 
}); 

這裏擺弄 https://jsfiddle.net/fhxx9hm3/

Answer 1

你應該每個產品只有一次添加的按鈕。

var addToBasket = function() { 
    var that = $(this); 
    if(!that.hasClass('added')) { 
     //Append the button here 
     that.clone().add('<button>x</button>').appendTo($('.basket')); 
     //Or 
     //that.clone().append('<button>x</button>').appendTo($('.basket')); 
     that.addClass('added'); 
    }; 
    //Following statement is not required 
    //$('.basket .product').append('<button>x</button>');  
}; 

DEMO