Question

我在一个表中创建了一系列清单，这些清单都具有相同的类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>
...

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

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

Answer 2

添加到VtoCorleones帖子但保持函数不在循环中。这样做

function checkBoxFunc(b){
  b.addEventListener('click', function(){
     //js here
 }, false);
}
for (i=0; i <unitCheckboxes.length; i++){
    checkBoxFunc(unitCheckBoxes[i]);
 }
//also if using eventListener add polyfill before all of this
if(!document.addEventListener){
  document.addEventListener=function(type, fn){
    document.attachEvent("on"+type, fn);
 };
}

我只是这样说，因为对于一个更清洁的人来说，现在我们有更好的兼容性。希望这有点帮助。只是想再解释一下我的评论

＆＃34;未定义＆＃34;不是清单数组上的函数设置监听器

2 个答案: