Question

我正在尝试将事件侦听器添加到一堆动态创建的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)});
}

由于

Answer 1

那是因为你正在修改包装元素的innerHTML。修改后，解析innerHTML并生成新节点。由于旧节点被新节点替换，因此在先前迭代中绑定到（现在已删除）元素的事件侦听器将无法工作。

您应该使用事件委派技术或使用document.createElement方法生成元素，并使用包装元素.appendChild（#window元素）附加它们。

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

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);
}

Answer 2

如果我错了，请纠正我，但看起来您将div元素的ID设置为等于i，而不是＆＃39;＃row＆＃39; + i。

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

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

编辑无论如何，这里的问题是javascript中的功能范围。在你的情况下，即使在for循环执行之后，我总是= total。我为此创建了一个闭包。

看看这个jsfiddle。 https://jsfiddle.net/jr9gzvda/

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

2 个答案: