Javascript 事件侦听器不'；I don’我没有按预期工作

所以现在，我可以动态创建元素（2行12个块），当我单击单个块时，我也可以更改它的颜色

然而，我有两个主要问题。当我单击a块以更改其颜色时，颜色选择器将在其旁边弹出，没有任何问题。但是我点击的所有后续块，颜色选择器仍然会在点击的第一个块旁边弹出

我不知道为什么会发生这种情况，因为我确实将单击的元素绑定到颜色选择器

我的第二个问题是一个小问题，但我不确定如何着手解决它：颜色选择器有时出现在盒子后面

以下是我迄今为止所做工作的链接：

---

我建议找到一个更好的文档化颜色选择器，比如Looks-like

show

方法在将现有选择器设置为可见后立即返回（参见第418到423行）。因此，所有设置仅在创建后第一次调用

show

时进行。将

picker

设置为

null

（当前已在代码中注释掉）并创建一个新的picker没有任何帮助，因为它不会从DOM中删除包装器元素（

#picker\u wrapper

），并且

getElementById

总是找到第一个创建的元素，而不是新的元素（具有相同的

id

）。在lib中解决这些问题的范围太广，无法回答。@Teemu您会推荐什么作为替代方案？一个新的颜色选择器？也许一个新的颜色选择器将是解决方案。经过一番小小的研究，我从中找到了原始代码。上次提交日期为2014年3月12日，看起来该项目不再处于活动状态。另一种选择是使用fork库，自己解决问题。

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)
    if(!picker){
        console.log("new picker initialized")
        picker = new Picker(this)
    }
    else{
        console.log("gets inside else case")
        picker.settings = {
            parent: this,
            orientation: 'right',
            x: 'auto',
            y: 'auto',
            arrow_size: 20
        };

        //.parent = this;
    }
    picker.show();


 picker.on_done = function(colour) {
    $(self).css('background-color',colour.rgba().toString());
    picker.hide()
    }

e.stopPropagation();
})