新しい要素にボタンを追加

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