0

Why is the listener works only on one td ?

Here is the fiddle.

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

this line works only on one item while the alert in comment works well for all td items.

Pedro Lobito
  • 94,083
  • 31
  • 258
  • 268
AshBringer
  • 2,614
  • 2
  • 20
  • 42
  • 1
    I'll almost guarantee that nobody is going to answer if you don't clean up this (mess of a) code first. – OddDev Apr 08 '15 at 13:34
  • You could also consider delegating the listener to a parent element and using event propagation (aka bubbling). One listener is better than many. – Andy Apr 08 '15 at 13:38
  • Similar question: http://stackoverflow.com/questions/1634346/addeventlistener-only-works-on-last-object – Kamil Socha Apr 08 '15 at 13:42

2 Answers2

1

I understand you're code even though it's a bit messy, yet I'm not sure if I should give you an answer because I'll be teaching you bad practices by the way your code is. But what you will want to learn is about Event Delegation here are some really good sources:

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

Attention:

Please do not vote down. I didn't want to comment this because it would not look good to read. So if someone is going to provide a answer to the direct question please feel free. I just believe @BipBip would like to learn about event Delegation.

Thank You.

Edwin Reynoso
  • 1,511
  • 9
  • 18
  • This is a link only answer ... please provide code within your answers per site guidelines – charlietfl Apr 08 '15 at 13:41
  • I'm confused? What you want me to provide. I'm not really providing an answer. But this would not look good in a comment. He doesn't have to accept my answer. Someone may give him an answer directly to his question. – Edwin Reynoso Apr 08 '15 at 13:42
  • well if you aren't providing an answer use comment blocks or show OP how to use event delegation and turn this into a proper answer – charlietfl Apr 08 '15 at 13:46
  • @Edwin could you give the beginning of the code you are talking about please ? I just learned a bit about event delegation, would like to know how to apply it in this case – AshBringer Apr 08 '15 at 14:26
1

Because when you add the rows with innerHTML you destroy all of the events that are attached to its siblings. So each row you add, you destroy the previous events added. That is why only the last element has the click event.

You should either use event delegation or build the row with document.createElement() and 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);
epascarello
  • 204,599
  • 20
  • 195
  • 236