Как добавить слушателя в элемент td?

Question

Почему слушатель работает только на одном td?

Вот fiddle.

document.getElementById(x).addEventListener("click",showStatusDialog); 

эта линия работает только на одном пункте в то время как тревога в комментарии работает хорошо для всех td элементов.

Answer 1

Потому что, когда вы добавляете строки с innerHTML, вы уничтожаете все события, связанные с его братьями и сестрами. Поэтому каждую добавленную строку вы уничтожаете предыдущие события. Вот почему только последний элемент имеет событие click.

Вы должны либо использовать делегирование событий или построить строку с document.createElement() и appendChild()

//outside the loop 
var tbody = document.querySelector("#tfhover tbody"); 


var tr = document.createElement("tr"); 
var td1 = document.createElement("td"); 
td1.innerHTML = json2[i].rank; 
var td2 = document.createElement("td"); 
td2.innerHTML = json2[i].content; 
var td3 = document.createElement("td"); 
td3.innerHTML = json2[i].UID; 
td3.id = "uid"+i; 
td3.addEventListener("click",showStatusDialog); 
tr.appendChild(td1); 
tr.appendChild(td2); 
tr.appendChild(td3); 
tbody.appendChild(tr); 

Answer 2

Я понимаю, что вы код, хотя это немного беспорядочно, но я не уверен, что я должен дать вам ответ, потому что я буду учить вас плохим практикам, как ваш код. Но то, что вы хотите узнать о Event Делегация здесь некоторые действительно хорошие источники:

Source 1

First link is by codepen and it says I needed some code so I'm pretending this is code. 

Source 2

Source 3

Source 4

Внимание:

Пожалуйста, не голосуйте. Я не хотел комментировать это, потому что было бы неплохо читать. Поэтому, если кто-то собирается дать ответ на прямой вопрос, пожалуйста, не стесняйтесь. Я просто верю, что @BipBip хотел бы узнать о делегировании событий.

Thank you.