ColorPickerが期待通りに機能しない

Question

今、私は動的に要素を作成できます（12行の2行）。個々のブロックをクリックすると、その色も変更できます。

しかし、私には1つの問題があります。ブロックをクリックして色を変更すると、カラーピッカーがその横にポップアップ表示され、問題はありません。新しい行セットを追加して同じブロック番号を色付けしようとすると、前の行のブロックの色が置き換えられます。

たとえば、最初の行の12番目のブロックを色付けし、2つの新しい行セットを追加し、2番目のセットの同じブロックをクリックすると、前のセットのブロックをクリックしているかのように動作します。

http://codepen.io/anon/pen/bwBRmw

var id_num = 1; 
var picker = null; 
$(function() { 
$(document).on('click', ".repeat", function (e) { 
    e.preventDefault(); 
    var $self = $(this); 
    var $parent = $self.parent(); 
    if($self.hasClass("add-bottom")){ 
     $parent.after($parent.clone(true).attr("id", "repeatable" + id_num)); 
     id_num = id_num + 1; 
     //picker = null; 

    } else { 
     $parent.before($parent.clone(true).attr("id", "repeatable" + id_num)); 
     id_num = id_num + 1; 
     //picker = null; 
    } 
}); 
}); 


$(".container").on("click", "a", function(e) { 
var self = this; 
console.log(this.id) 
console.log(this) 

    $(self).spectrum({ 
     color: "#f00", 
     change: function(color) { 
      $(self).css('background-color',color.toHexString()); 
     } 
    }); 

e.stopPropagation(); 
}) 

Answer 1

問題はすでにカラーピッカーを持っている要素のクローンを作成していることのようだ：私は私のColorPickerのここ

としてhttps://bgrins.github.io/spectrum/を使用していますことは、私がこれまでにやっていることへのリンクですイベントが拘束される。

EDIT：jQueryのclone()の使用を変更することで問題を回避できると思います。あなたは、イベント（、DOMオブジェクトは古いものを指してカラーピッカーなしで作成されますfalseデフォルトclone()への最初のパラメータを省略した。

Here's an example私はあなたが探しているものをやっていると思う含めずにクローンを作成することを指示した場合for。trueのパラメータをclone()のために削除しました.HTMLやCSSの変更はありません。