Question

我试图找到一种方法将事件处理程序分配给我动态创建的每个框。用户可以点击＆＃34;添加以上＆＃34;或＆＃34;在下面添加＆＃34;只要他们点击，就会出现2行框。

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

但是，我的程序有点儿麻烦，它只适用于用户点击的第一个方块，而且colorPicker永远不会再弹出。

有谁知道如何解决这个问题，或者是否有更好的选择？

我的代码：

var theParent = document.querySelector(".container");
theParent.addEventListener("click", doSomething, false)

//var picker = new Picker()
function doSomething(e) {
    console.log("gets inside doSomething")
    console.log(e.target)
    console.log(e.currentTarget)
    if (e.target !== e.currentTarget) {
        var clickedItem = e.target.id;
        console.log("Hello " + clickedItem);
        var k = document.getElementById(clickedItem)
        var picker = new Picker(k)
        picker.show();

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

    //e.stopPropagation();
}

Answer 1

我在您的CodePen中注意到您没有发布doSomething的完整代码。您遇到问题，因为picker变量是函数的本地变量。如果代码执行没有落入IF语句内，则永远不会创建选择器变量。只需取消注释在函数外部声明picker变量的代码，并从实例化新选择器的代码行前面删除var指令。此外，您需要重置＆＃34;父母＆＃34;选择器的元素，因为页面上只有一个选择器：picker.settings.parent = k;

var picker = null; // Initialize global variable

function doSomething(e) {
    console.log("gets inside doSomething")
    console.log(e.target)
    console.log(e.currentTarget)
    if (e.target !== e.currentTarget) {
        var clickedItem = e.target.id;
        console.log("Hello " + clickedItem);
        var k = document.getElementById(clickedItem)

        // Reference the global "picker" variable
        if (!picker) {
          picker = new Picker(k)
        } else {
          // Set the "parent" element of the picker to the newly clicked element
          picker.settings.parent = k;
        }
        picker.show();

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

    //e.stopPropagation();
}

如何将事件处理程序分配给多个元素（colorPicker）

1 个答案: