Настроить динамически созданные элементы, добавив опцию, выбранную во всплывающем окне

Question

У меня есть небольшой код, который создает элементы (прямоугольники), и когда я нахожу на них курсор мыши, появляется «настроить желтую кнопку на нем».Когда я нажимаю эту кнопку, всплывающее окно с цветами позволяет нам выбрать цвет для добавления в выбранный прямоугольник.

В основном у меня есть 3 элемента ... нажмите на 1 из них и выберите цвет.Это действие клонирует тег и устанавливает его в выбранном элементе.Это работает нормально.

Проблема возникает, когда я нажимаю на второй элемент (или третий) ... Я выбираю новый другой цвет, но действие изменяет выбранный прямоугольник, а элемент-брат применяется ко всем элементам, которые ужеиметь клонированный - (как распространение) ...

Мне нужно настроить каждый прямоугольник с его собственным цветом, а не все из них с тем же.Я вставил сюда небольшой код и рабочую (неправильную) ссылку в jsfiddle.

Действие выполняется «вкл», поскольку элементы создаются динамически (в этом примере я устанавливал их вручную.

МожетКто-нибудь мне помочь? Я не понимаю, что я делаю неправильно.

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: Пожалуйста, простите мой плохой английский: (* ​​1021 *

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