javascript - 将自己传递给 OnClick 事件 JavaScript

Question

我添加到 JavaScript 输入的点击事件无法正常工作。
到目前为止，我的代码如下所示:

function order(option) {
    if(option.checked) {
        document.getElementId("col_order").value = document.getElementById("col_order").value + " " + option.value;
    }
}
...//somewhere further down
for(var i = 0; i < options.length; i++) {
    var check = document.createElement("input");
    var label = document.createElement("label");
    var description = document.createTextNode(options[i]);
    check.type = "checkbox";
    check.name = "order_list[]";
    check.value = options[i];
    check.onclick = "order(check)";  //Problem here
    label.appendChild(check);
    label.appendChild(description);
    element.appendChild(label);
}

我也尝试过:

check.onclick = (function() { var option = check; return function() {order(option);}})();

我遇到的问题是 check.onlick 代码行。当我使用普通 HTML 添加此内容时:

<input type = "checkbox" name = "order_list[]" onclick = "order(this)" value = "randVal">randVal</input>

我没有任何问题；该方法执行后会产生预期的结果。有什么想法吗？
让我澄清一下:我可以很好地进入 order 函数，但我从未进入 if 语句，即使刚刚单击了复选框

Answer 1

使用 addEventListener 代替，即使它看起来应该可以工作，但你会在每次迭代中覆盖相同的变量，因为 for 循环中没有闭包，所以我可能会添加一个闭包以避免出现问题。

对于复选框，您将监听 change 事件，而不是click

for(var j = 0; j < options.length; j++) {
    (function(i) {

        var check = document.createElement("input");
        var label = document.createElement("label");
        var description = document.createTextNode(options[i]);

        check.type = "checkbox";
        check.name = "order_list[]";
        check.value = options[i];

        check.addEventListener('change', function() {
            if (this.checked) {
                var col_order = document.getElementById("col_order");
                col_order.value = col_order.value + " " + this.value;
            }
        }, false);

        label.appendChild(check);
        label.appendChild(description);
        element.appendChild(label);

    })(j);
}

FIDDLE