Question

我正在尝试找到一种方法来为我动态创建的每个框分配事件处理程序。用户可以点击“上方添加”或“下方添加”，只需点击一下就会出现2行框。

我也试图这样做，以便当用户点击特定方格时，会弹出一个colorPicker，并且可以更改特定方块的颜色。

出于某种原因，只有当用户点击前两行正方形时，才会弹出颜色选择器。如果在当前集合的下方或上方动态添加更多行，则单击正方形时不会发生任何事情。

有谁知道为什么会这样？

到目前为止我做过/尝试过的事情：

var theParent = document.querySelector(".container");
theParent.addEventListener("click", doSomething, false)
function doSomething(e) {
   console.log("gets inside doSomething")
   console.log(e.target)
   console.log(e.currentTarget)
if (e.target !== e.currentTarget && e.target.id !== "") {
    var clickedItem = e.target.id;
    console.log("Clicked on " + clickedItem);
    var led = document.getElementById(clickedItem)

    if(!picker){
        console.log("new picker initialized")
        picker = new Picker(led)
    }
    else{
        console.log("gets inside else case")
        picker.settings.parent = led;
    }
    picker.show();

}
 picker.on_done = function(colour) {
    $(led).css('background-color',colour.rgba().toString());
    picker.hide()
    }

//e.stopPropagation();
}

Answer 1

在第2行尝试：

$(document).on("click", ".container", doSomething);

Answer 2

这可能无法解决您的所有问题，但如果您从点击中删除e.preventDefault();：

 $("body").on('click', ".repeat", function (e) {
        e.preventDefault();

它将允许您更改每个新创建的部分的颜色。希望有帮助吗？

事件处理程序不适用于所有元素

2 个答案: