Использование += на innerHTML уничтожает прослушиватели событий на элементах внутри HTML. Правильный способ сделать это - использовать document.createElement. Вот минимальный, полный пример:
for (let i = 1; i < 10; i++) {
const anchor = document.createElement("a");
document.body.appendChild(anchor);
anchor.id = "title" + i;
anchor.href= "#";
anchor.textContent = "link " + i;
document.getElementById("title" + i)
.addEventListener("click", e => console.log(i));
}
a {
margin-left: 0.3em;
}
Конечно, document.getElementById здесь не является необходимым, поскольку мы только что создали объект в блоке l oop. Это спасает потенциально дорогие прогулки по деревьям.
for (let i = 1; i < 10; i++) {
const anchor = document.createElement("a");
document.body.appendChild(anchor);
anchor.href= "#";
anchor.textContent = "link " + i;
anchor.addEventListener("click", e => console.log(i));
}
a {
margin-left: 0.3em;
}
Если у вас есть произвольные чанки со строкой HTML, как в вашем примере, вы можете использовать createElement("div"), установить его innerHTML один раз на чанк и добавьте слушателей по мере необходимости. Затем добавьте div как дочерний элемент вашего контейнера.
for (let i = 1; i < 10; i++) {
const rawHTML = `<div><a href="#" id="link-${i}">link ${i}</a></div>`;
const div = document.createElement("div");
document.body.appendChild(div);
div.href= "#";
div.innerHTML = rawHTML;
div.querySelector(`#link-${i}`)
.addEventListener("click", e => console.log(i));
}