動態事件監聽器僅在最后創建的元素上起作用

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

那是因為您正在修改wrapper元素的innerHTML 。 修改后，將解析innerHTML並生成新的Node。 由於舊節點已被新節點替換，因此先前迭代中綁定到（現在已刪除）元素的事件偵聽器將無法工作。

您應該使用事件委托技術，或者使用document.createElement方法生成元素，並使用wrapper元素（ #window元素）的.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);
}

Answer 2

如果我錯了，請更正我，但看起來您正在將div元素的ID設置為i，而不是“ #row” + i。

此外，這是jQuery可以提供極大幫助的一個實例。 不是那個家伙，但是你可以很容易地做

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

編輯不管怎么說，你的問題就在這里是在JavaScript函數范圍內。 即使在for循環執行后，我也總是= total。 我為此創建了一個關閉。

看看這個jsfiddle。 https://jsfiddle.net/jr9gzvda/