如何将onclick事件侦听器添加到所有动态创建的行?

Question

我在表中创建了一些动态行，并将onclick listener附加到它们:

var i=0;
while(i!=5){
var row=table.insertRow(table.rows.length);
var cell=row.insertCell(0);
var cell1=row.insertCell(1);
var cell2=row.insertCell(2);
var cell3=row.insertCell(3);
var cell4=row.insertCell(4);
var cell5=row.insertCell(5);
row.style.cursor="pointer";
row.addEventListener("click",f1);
i+=1;
}
function f1(){
console.log(true);
}

但是无论我点击该行多少次，事件都不会被触发。我哪里出错了?请帮帮我

Answer 1

委托给最近的静态容器

function f1(e) {
console.log(e.target.closest("tr").id, ";", e.target.textContent);
}
table.addEventListener("click", f1)

var i = 0;
const table = document.getElementById("tb");
while (i != 5) {
var row = table.insertRow(table.rows.length);
var cell0 = row.insertCell(0);
cell0.textContent = "row " + i + ", cell 0"
var cell1 = row.insertCell(1);
cell1.textContent = "row " + i + ", cell 1"
var cell2 = row.insertCell(2);
cell2.textContent = "row " + i + ", cell 2"
var cell3 = row.insertCell(3);
cell3.textContent = "row " + i + ", cell 3"
var cell4 = row.insertCell(4);
cell4.textContent = "row " + i + ", cell 4"
var cell5 = row.insertCell(5);
cell5.textContent = "row " + i + ", cell 5"
row.style.cursor = "pointer";
row.id = `Row${i}`;
i += 1;
}
function f1(e) {
console.log(e.target.closest("tr").id, ";", e.target.textContent);
}
table.addEventListener("click", f1)

td {
border: 1px solid black;
}

<table>
<tbody id="tb"></tbody>
</table>

使用map和模板字面值创建5 × 6表的新方法

const f1 = e => console.log(e.target.closest("tr").id, ";", e.target.textContent);
const numRows = 5, numCells = 6;
const table = document.getElementById("tb");
table.innerHTML = Array.from({length:numRows})
.map((_,i) => `<tr id="Row${i}">
${Array.from({length:numCells})
.map((_,j) => `<td>Row ${i}, cell ${j}</td>`)
.join('')}
</tr>`)
.join('');
table.addEventListener("click", f1)

td {
border: 1px solid black;
}
tr { cursor = "pointer"; }

<table>
<tbody id="tb"></tbody>
</table>