Colorpicker按預期工作

Question

所以現在我可以動態地創建元素（2行12塊），當我單擊一個塊時，我也可以改變它的顏色。

但是，我有一個問題。當我點擊一個塊來改變顏色時，顏色選擇器會彈出，沒有任何問題。當我添加一組新的行並嘗試着色相同的塊編號時，它將替換上一行中塊的顏色。例如，如果我在第一行中着色第12個塊，然後添加2個新的行集並單擊第二個集合中的同一個塊，它就會像我點擊上一個集的塊一樣。我使用https://bgrins.github.io/spectrum/我的取色

這裏是我迄今所做的鏈接：

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元素事件發生。

編輯：我想我已經設法解決了這個問題，通過改變你對jQuery的使用clone()。如果你告訴它不包含事件（第一個參數省略，其默認爲false，對DOM對象將不會在舊的指向將ColorPicker創建clone()克隆。

Here's an example，我認爲是在幫你在找什麼for。我剛剛刪除了clone()的true params。沒有更改HTML或CSS。