Question

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

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

我不知道为什么会这样，因为我将点击的元素绑定到颜色选择器。

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

这是我到目前为止所做的链接：

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();
})

事件侦听器无法按预期工作

0 个答案: