Javascript 仅在最后创建的元素上工作的动态事件侦听器

我试图将事件侦听器添加到一组动态创建的div中，但由于某些原因，它只在最后创建的div中起作用。 如何使事件侦听器在所有div中工作

更新

 for (var i = 0; i < total; i++) 
{
   row_string =  row_string+  "<div id='row" + i + "' class='detail-view'></div>";
   document.getElementById('window').innerHTML = document.getElementById('window').innerHTML+row_string;
   document.getElementById('row'+i).addEventListener('click', function() {openRow("#row"+i)});
}

for（变量i=0；i

---

谢谢，这是因为您正在修改包装器元素的

innerHTML

。修改后，将解析

innerHTML

，并生成新节点。由于旧节点被新节点替换，因此在以前的迭代中绑定到（现在已删除）元素的事件侦听器将无法工作

您应该使用事件委派技术，或者使用

document.createElement

方法生成元素，并使用包装器元素（窗口

#元素）的
.appendChild
将它们追加

以下是第二种建议方法的示例：

function openRow(event) {
  var id = this.id;
  // ...
}

var el, win = document.getElementById('window');

for (var i = 0; i < total; i++) 
{
   el = document.createElement('div');
   el.classList.add('detail-view');
   el.id = 'row_' + i;
   el.addEventListener('click', openRow);
   win.appendChild(el);
}

函数openRow（事件）{
var id=this.id；
// ...
}
var el，win=document.getElementById（'window'）；
对于（变量i=0；i
如果我错了，请纠正我，但看起来您将div元素的ID设置为I，而不是“#row”+I

此外，这是一个jQuery非常有用的例子。不是那个家伙，但你可以很容易做到

    $('.detail-view').click(function() { /* code */ });

编辑无论如何，这里的问题是javascript中的函数范围。在您的情况下，即使在for循环执行之后，我也将始终=total。我为此创建了一个闭包

看看这个jsfiddle
 可以演示如何添加事件侦听器吗？当然，我会更新问题，我必须使用document.createElement创建所有需要的div，然后使用appendChild添加到pafe。创建后，我将使用addEventListener，对吗？@MarcelOliveira是的。我会用一个例子更新答案。谢谢你的帮助@MarcelOliveira不客气，我已经更新了答案。我现在正在将我的代码转换为createElement的东西，一旦我完成，我会让你知道它是否有效。谢谢，对不起，我的代码不是这个，我把ID写错了，我会改正的。