如何將事件處理程序分配給多個元素 (colorPicker)

Question

我試圖找到一種方法來為我動態創建的每個框分配事件處理程序。 目前，用戶可以單擊“在上方添加”或“在下方添加”，他們單擊的任何位置都會出現 2 行框。

我試圖做到這一點，當用戶單擊特定方塊時，會彈出一個 colorPicker 並且可以更改該特定方塊的顏色。

但是，我的程序有點問題，它只適用於用戶點擊的第一個方塊，colorPicker 再也不會彈出。

有誰知道我該如何解決這個問題，或者是否有更好的選擇？

我的代碼：

http://codepen.io/anon/pen/bwBRmw

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指令。 此外，您需要重置選擇器的“父”元素，因為頁面上只有一個選擇器： 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();
}