Question

我有一些代码来创建元素（矩形），当我将鼠标移到它们上方时，“自定义黄色按钮出现在其上”。当我单击此按钮时，带有颜色的弹出窗口让我们选择一种颜色添加到所选矩形中。

基本上，我有3个元素...单击它们之一，然后选择一种颜色。此操作将克隆de tag并将其设置到所选项目中。效果很好。

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

我需要使用自己的颜色自定义每个矩形，而不是全部使用相同的颜色。我在此处粘贴了一些代码，并在jsfiddle中粘贴了有效的（错误的）链接。

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

有人可以帮助我吗？我不明白我在做什么错。

https://jsfiddle.net/martiniglesias/20Laxn84/2/

$(document).on("click","a.person",function (e) 
{
    e.preventDefault();
    e.stopPropagation();

    var elrel=$(this).attr('rel');
    var elem=$("#ch_dndBoard1 span[data-id="+elrel+"]");
    var elemrel=elem.attr("rel");

    if (elemrel=="f1E")
    {
        $("body").append ("<div class='overlay'></div>").show();
        $(".persE").fadeIn("fast");

        $(".persE li").click(function(f)
        {
            f.preventDefault();
            f.stopPropagation();
            var ese=$(this).closest("li");
            if ($(this).hasClass("nope"))
            {
                elem.find('b').fadeOut("slow",function() { elem.find('b').remove(); });
            }
            else
            {
                elem.find('b').remove();
                var added=ese.find("b").clone();
                added.css({"left":0+"px","top":+5.48+"px","position":"absolute"});
                $(added).insertAfter(elem.find('em'));
            }
            $('.persE').fadeOut("fast",function(){ $(".overlay").remove(); });
        });
    }
    return false;
});

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

谢谢！

PS：拜托，请原谅我可怜的英语：（

Answer 1

您遇到此问题是因为您要向click添加一个.persE li事件监听器，每次您都单击a.person。

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

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

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

请注意，如果您通过另一种逻辑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);

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

1 个答案: