js onclick 新创建的元素

Question

您好，我正在尝试为我的项目创建一个简单的颜色选择器。它应该显示 DIV vith colored SPANS 并且每个 span 应该 onclick 调用我的函数 -pickColor()- 及其 onwn 值。

问题是，在单击任何跨度后，我的函数只是用数组中的最后一个值而不是对应的值调用。知道如何纠正它吗？

这是我的代码

var colors = [ "303030", "777777", "da0025", "f01800", "ff4300", "fd6c05", "feab07", "ffc91e", "93c900", "54c300", "00ab62", "00c3c4", "009bf0", "006afe", "3f00dd", "9025ff", "ff3ec2", "fe0b6b"];

//颜色选择器变量选择器；

function createPicker(){
//create picker wrapper
picker = document.createElement('div');
picker.id = "colorPicker";
picker.style.display = "none"; // initialy invisible !
picker.style.margin = "0";
picker.style.padding = "0.5em";
picker.style.backgroundColor = "rgb(30,30,30)";
//create picker color options
var newColor;
for (var i = colors.length - 1; i >= 0; i--) {
    newColor = document.createElement('span');
    newColor.id = colors[i];
    //set style for color option
    newColor.style.display = "inline-block";
    newColor.style.width = "50px";
    newColor.style.height = "50px";
    newColor.style.margin = "0";
    newColor.style.padding = "0";
    newColor.style.backgroundColor = "#"+colors[i];
    //add onclick function

    newColor.addEventListener("click", function f(){pickColor( colors[i] )}, true);

    //append option
    picker.appendChild(newColor);
};
//append colorPicker to file
document.getElementById('here').appendChild(picker); // value must be set to the parent elements id !
}

function displayPicker(){
picker.style.display = "inline-block";
}

function pickColor(id){
//set value
console.log(id);
var input = document.getElementById('color'); // must be the 'input' elements id that we want to set !
//console.log(input);
input.value = id;
// hide picker
picker.style.display = "none";
}

Answer 1

在看了 Teemu 的推荐 link（感谢）之后，我意识到如果在循环中的 addEventListener 方法调用中使用 function 会变得非常棘手。

那么如果不带任何参数，这样做怎么样：

newColor.addEventListener("click", pickColor, true);

在 pickColor 函数中，您可以通过以下方式访问 id：

function pickColor(){

   var id = this.id;
   //more code below

}

Answer 2

闭包很好，虽然有时有点混乱。这是 Fiddle 问题（我希望）已解决，这是使之成为可能的 js 代码：

newColor.addEventListener("click", (function (param) {
            return function() {
                pickColor(colors[param]);
            };
        })(i), true);

问题在于，由于关闭，i 值为 -1。你必须将 i 的实际值传递给函数，并且由于闭包，在你最终返回并用于事件的函数中使用它。

更新

更好的方法：在代码中的某处定义函数：

function clickEvHandlerClosure(param) {
    return function () {
        pickColor(colors[param]);
    };
}

然后：

newColor.addEventListener("click", clickEvHandlerClosure(i), true);

fiddle

希望对您有所帮助。

js onclick 新创建的元素

js onclick for newly created element

javascript

onclick

onclicklistener