Question

我有以下代码。我的问题是，当点击时，事件正在触发，但传递的参数不正确。它传递最后一个动态创建的行，即dataStructure.length值。任何人都知道如何解决这个问题？

        var table = document.getElementById('output');                  

        for(i =0; i<dataStructure.length; i++){
            var row = document.createElement('tr');
            row.setAttribute('id', i);
            var url = dataStructure[i].url;

            if(document.addEventListener)
                row.addEventListener('click', function(){handleRowClick(i);}, false);
            var obj = dataStructure[i];
            var cellCount = 0;
            for(field in obj){
                var cell = document.createElement('td');
                cell.setAttribute('id', cellCount++);
                //cell.addEventListener('click', function(){window.open(dataStructureObj.links[i].url);}, false);
                cell.innerHTML = obj[field];
                row.appendChild(cell);
            }
            cellCount = 0;
            table.appendChild(row);
        }           
        }

        function handleRowClick(rowClicked){
            var rowHTML = rowClicked.innerHTML;
            var cells = rowHTML.getElementsByTagName('td');
            for(cell in cells)
            {
                alert(cell.value);
            }
            window.open(cells[1].innerHTML); 
        }

Answer 1

i中的

function(){handleRowClick(i);}是循环变量i。当函数被调用时，循环被完成，i保存它在循环结束时所做的最后一个值，不它创建{{1 }}

这是闭环问题。有关使用闭包或function(){}的解决方案，请参阅this question：

Function#bind

但是，目前你并没有真正使用row.addEventListener('click', handleRowClick.bind(window, i), false);。它会更容易说：

然后使用row.addEventListener('click', handleRowClick, false);检索行：

this

（旁注：不幸的是，如果你添加function handleRowClick(){ window.open(this.cells[1].innerHTML); }备份以支持IE＆lt; = 8，它就不会attachEvent正确，所以你仍然会看着闭包/绑定到得到你想要的对象。）

也：

this

缺少for(i =0; i<dataStructure.length; i++){：var是偶然的全球性。

在HTML文档中避免使用row.setAttribute('id', i); / getAttribute。他们没有在IE中做他们应该做的事情。使用DOM Level 2 HTML属性，它们更可靠，更易读：setAttribute。

addEventListener将调用者作为参数传递

1 个答案: