“undefined"不是检查表数组上的函数设置侦听器

"undefined" is not a function setting listener on array of checklist

本文关键字：数组 函数 侦听器 设置 检查表 undefined quot      更新时间：2023-09-26

我在一个表中创建了一个清单数组，这些清单都具有相同的类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错误示例:

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

将循环改为- 

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

这是小提琴-小提琴

添加到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);
 };
}

我之所以这么说，一方面是因为它更简洁，而且现在我们有了跨浏览器兼容性。希望这对你有所帮助。我只是想再解释一下我的评论

相关文章：