EventListener will not work on clones

Question

var whichSelected = document.querySelectorAll(".selected");

for(var i = 0; i < whichSelected.length; i++) {

    var clone = whichSelected[i].cloneNode(false);
    clone.addEventListener("click", function() {createOutline(clone)});
    document.body.appendChild(clone);

}

I have no idea why the event listener will not work on the clones. Any ideas is appreciated!

What is `selected` in `if(selected)`? You are not closing your `for-loop` and `if` — Arg0n, Nov 26 '15 at 15:58
@DanielAbella Can you please create a _short_ example which reproduces your issue, and also define "will not work". — Teemu, Nov 26 '15 at 16:10
Are you linking the right fiddle? It doesn't even have your above code. — simonzack, Nov 26 '15 at 16:11
You set zIndex = -1, so your clone is under the body. You can't click it. — Roman Granovsky, Nov 26 '15 at 16:12
@Arg0n: The code in the question suffers from the problem that all event listeners will call `createOutline` with the same `clone` variable (which holds only the last clone). That's what the OP means by "not working", isn't it? — Bergi, Nov 26 '15 at 16:27
@Bergi Nope, it was not working because he set `z-index: -1;`, so the node could not be clicked. Atleast the specific problem of the event not being triggered. — Arg0n, Nov 26 '15 at 16:28
@Arg0n: Hm, there's nothing in the question about that… Maybe in the fiddle. — Bergi, Nov 26 '15 at 16:29
@Bergi "I have no idea why the event listener will not work on the clones". — Arg0n, Nov 26 '15 at 16:30
@Arg0n: Yes, the event listeners don't work on their respective clones, they work on the last created one. That's the problem. Or at least *a* problem :-) — Bergi, Nov 26 '15 at 16:34
@Bergi That may be true, but the other problem, as stated, was that no event was triggered at all. Problem for all clones. — Arg0n, Nov 26 '15 at 16:35

score 2 · Accepted Answer · answered Nov 26 '15 at 16:13

2

You are setting the z-index of the copied node to -1, so when clicking, you click on body.

Also, the id is the same as the copied node, you might want to change this.

answered Nov 26 '15 at 16:13

Arg0n

8,283
2
21
38

Thank you! Much appreciated, you are legendary! – Daniel Abella Nov 26 '15 at 16:16
@DanielAbella Please accept the answer if it worked.. – Jacques Marais Nov 26 '15 at 16:17
Roman Granovsky came to the same conclusion about the same time, give him some cred to in his comment :) – Arg0n Nov 26 '15 at 16:18

EventListener will not work on clones

1 Answers1

Linked