javascript - "undefined"不是 list 数组上设置监听器的函数

Question

我在一个表中创建了一系列 list ，它们都具有相同的类 unitCheckbox，以便我可以在文档中找到它们，如下所示:

<table class="table table-striped table-fixedheader" style="margin-bottom:-5px">
<thead>
<tr><th width="40%">Serial</th><th width="25%">Type</th><th width="35%">Included</th></tr>
</thead>
<tbody>
<tr>
    <td width="40%">A2F0J000</td>
    <td width="25%">Base</td>
    <td align="center" width="35%"><input id="A2F0J000" type="checkbox" name="Base" value="A2F0J000" class="unitCheckbox"></td>
</tr>
<tr>
    <td width="40%">A2F0J001</td>
    <td width="25%">Base</td>
    <td align="center" width="35%"><input id="A2F0J001" type="checkbox" name="Base" value="A2F0J001" class="unitCheckbox"></td>
</tr>
<tr>
    <td width="40%">A2F0J002</td>
    <td width="25%">Client</td>
    <td align="center" width="35%"><input id="A2F0J002" type="checkbox" name="Client" value="A2F0J002" class="unitCheckbox"></td>
</tr>
<tr>
    <td width="40%">A2F0J003</td>
    <td width="25%">Client</td>
    <td align="center" width="35%"><input id="A2F0J003" type="checkbox" name="Client" value="A2F0J003" class="unitCheckbox"></td>
</tr>
...

然后，我尝试在所有这些复选框上设置一个更改监听器，如下所示:

var unitCheckboxes = document.getElementsByClassName('unitCheckbox');

for(c in unitCheckboxes){
    if(unitCheckboxes.hasOwnProperty(c)){
        unitCheckboxes[c].addEventListener("change", function(){

                alert("hi");
                }, false);
    }
}

但是，我在控制台中收到错误:

TypeError: 'undefined' is not a function (evaluating 'unitCheckboxes[c].addEventListener("change", function(){
                // Do something
            }, false)')

这是一个简单的 jsfiddle example错误。

Answer 1

你的循环是问题所在。当循环遍历时，其中一个属性最终成为长度，并且当您执行 unitCheckboxes['length'] 时它会爆炸。

将循环更改为 -

for(var i = 0; i < unitCheckboxes.length; i++){
    (function(i){
        unitCheckboxes[i].addEventListener("change", function(){
            alert(i);
        }, false);
    })(i);
}

这是一个 fiddle - fiddle