Javascript 自定义动态创建的元素，添加通过弹出窗口选择的选项

我有一个创建元素（矩形）的小代码，当我把鼠标放在它们上面时，一个“自定义黄色按钮出现在上面”。当我点击这个按钮时，一个带有颜色的弹出窗口让我们选择一种颜色添加到选定的矩形中

基本上，我有三个元素。。。单击其中一个并选择一种颜色。此操作将克隆取消标记并将其设置到所选项目中。这个很好用

单击第二项（或第三项）时出现问题。。。我选择了一种新的不同颜色，但该操作会更改选定的矩形和同级-应用于已克隆的所有元素-（如传播）

我需要用自己的颜色定制每个矩形，而不是所有矩形都用相同的颜色。我在这里粘贴了一段代码，并在JSFIDLE中粘贴了一个正常（错误）的链接

该操作执行“on”，因为项目是动态创建的（在本例中，我手动设置它们）

有人能帮我吗？我不明白我做错了什么

$（文档）。在（“单击”，“a.person”，函数（e）
{
e、 预防默认值（）；
e、 停止传播（）；
var elrel=$（this.attr（'rel'）；
var elem=$（“#Chu dndBoard1 span[data id=“+elrel+”]）；
变量elemrel=元素属性（“rel”）；
如果（elemrel==“f1E”）
{
$（“body”）.append（“”.show（）；
美元（“.persE”）.fadeIn（“快速”）；
$（“.persE li”）。单击（函数（f）
{
f、 预防默认值（）；
f、 停止传播（）；
var ese=$（此）；
if（$（this.hasClass（“nope”））
{
元素find（'b'）.fadeOut（“slow”，function（）{elem.find（'b'）.remove（）；}）；
}
其他的
{
元素find（'b'）.remove（）；
var added=ese.find（“b”）.clone（）；
css（{“左”：0+“px”，“顶”：+5.48+“px”，“位置”：“绝对”}）；
$（添加）.insertAfter（elem.find（'em'））；
}
$（'.persE'）.fadeOut（“fast”，function（）{$（“.overlay”）.remove（）；}）；
});
}
返回false；
});

我希望每个矩形都可以从弹出窗口中选择自己的颜色。例如，我想要，rect1蓝色，rect2不带颜色，rect3红色

谢谢大家!

---

PS：请原谅我的蹩脚英语：（

你有这个问题，因为你在

中添加了一个
点击
事件监听器

当所有逻辑结束时，您需要删除该侦听器：

$(".persE li").click(function(f) {
    // Your code

    $(".persE li").off('click');
});

请注意，如果您收听另一个具有不同逻辑的
单击
事件，该事件也将被销毁

为了避免这种情况，您需要在函数中引用不同的逻辑：

const changeColorEvent = (e) => {
    // Your code

    $(this).off('click', changeColorEvent); // Here, "otherEvent" will still exist.
};

const otherEvent = (e) => {
    // Different logic here
}

$(".persE li").click(changeColorEvent);
$(".persE li").click(otherEvent);

没问题。我只是编辑了我的答案，添加了一个重要的细节。
const changeColorEvent = (e) => {
    // Your code

    $(this).off('click', changeColorEvent); // Here, "otherEvent" will still exist.
};

const otherEvent = (e) => {
    // Different logic here
}

$(".persE li").click(changeColorEvent);
$(".persE li").click(otherEvent);