Question

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

但是，我遇到了一个问题。当我点击一个块来改变它的颜色时，颜色选择器会弹出它旁边，没有任何问题。当我添加一组新行并尝试为相同的块编号着色时，它将替换上一行中的块颜色。

例如，如果我为第一行中的第12个块着色，然后添加2个新的行集并单击第二个集中的同一个块，它就像我点击上一个集合一样＃39; s块。我使用https://bgrins.github.io/spectrum/作为我的colorPicker

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

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()的使用来解决这个问题。如果你告诉它克隆而不包括事件（省略clone()的第一个参数，默认为false，那么将创建DOM对象，而不会将颜色选择器指向旧的。

Here's an example我认为正在做你正在寻找的事情。我刚刚删除true的{{1}}参数。没有对HTML或CSS的更改。

Colorpicker没有按预期工作

1 个答案: