如何向所有克隆的元素添加事件侦听器？

Question

I have this template:

<template id="a">
   <div class="b">
        <h1 class="placeholder1"></h1>
        <div class="info hide">
            <p class="p1"></p>
        </div>
    </div>

I am cloning it with:

fetch("json/countries.json").then(res => res.json()).then(list => show(list));
function show(list) {
    list.forEach(function (list) {
        const clone = template.cloneNode(true);
        clone.querySelector(".placeholder1").textContent = list.country;
})}

I am trying to add an event listener to each cloned object, but the result is that it only adds it to the first cloned element, not the rest.

clone.querySelector(".placeholder1").addEventListener('click', fx_button1);
function fx_button1(){
    document.querySelector(".info").classList.toggle("hide");
}

Answer 1

querySelector ^MDN only selects the first match found from the given selector. You need to use querySelectorAll ^MDN and then iterate the results.

var cloneSet = clone.querySelectorAll(".placeholder1");
for(var i = 0; i < cloneSet.length; i++){
    cloneSet[i].addEventListener('click', fx_button1);
}