AddEventListener не работает с недавно добавленным innerHtml?
Вопросов по этой проблеме очень много, все они охватывают разные ситуации. В этой ситуации мне никто не поможет.
1. Я не добавляю прослушиватель кликов до того, как элемент будет «создан»,
2. Я не вызываю обратный вызов в методе события (вместо этого я передаю его в более высоком порядке)
3. Цифра всегда правильная
this.update = function(data,status,num){
var raceview = document.getElementById("raceview")
if (status == "domestic"){
raceview.innerHTML += `<div class = "race">
<img id = "raceprofileimg" src = "${data.image}" alt = "">
<h3 id = "pendingmessage">Race is Pending</h3>
<h3 id = "username" class = "racenames">${data.name}</h3>
</div>`
}
else if (status == "pending"){ //both parties accepted the race
raceview.innerHTML += `<div class = "race">
<img id = "raceprofileimg" src = "${data.image}" alt = "">
<h3 id = "name${num}" class = "racenames">${data.name}</h3>
<button id = "${num}" class = "racebuttons" type = "button">Won</button>
<button id = "${num}"class = "rejectbuttons" type = "button">Loss</button>
</div>`
}
else{
raceview.innerHTML += `<div class = "race">
<img id = "raceprofileimg" src = "${data.image}" alt = "">
<h3 id = "name${num}" class = "racenames">${data.name}</h3>
<button id = "race${num}" class = "racebuttons" type = "button">Race</button>
<button id = "reject${num}" class = "rejectbuttons" type = "button">Reject</button>
</div>`
document.getElementById("race"+num).addEventListener("click",function(){self.accept_race(num,data.name)})
}
}
Сгенерированный HTML-код:
Эта функция глубоко вложена в кучу обратных вызовов и лямбда-выражений (вот причина использования ссылки на себя). переменная самость = это; вызов функции сам по себе работает в 100% случаев. Так что я не верю, что есть проблема с собственной функциональностью. так как self.accept_race() работает нормально. @ЙозефВиттманн
Тогда мне нужно больше контекста... Можете ли вы предоставить ссылку на код?
@JosefWittmann Я добавил больше информации для понимания
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Используя raceview.innerHTML +=, вы перезаписываете все элементы DOM в raceview. Они теряют все привязки событий, потому что весь элемент raceview перестраивается.
Последняя кнопка должна работать, я думаю.
Вы можете решить это так:
const race = document.createElement("div");
race.classList.add("race");
raceview.appendChild(race);
race.innerHTML = `...`;
document
.getElementById("race" + num)
.addEventListener("click", /* your handler */);
Легко понять, спасибо за понимание. Это ответило на мой вопрос.
Пожалуйста. Для вашего следующего проекта вы можете рассмотреть библиотеки представлений, такие как React или Vue, поскольку они значительно упрощают процесс создания элементов в JS.
Я так понимаю кнопки появляются? Я пытался воспроизвести это в своей консоли, но там срабатывает. Вы объявляли
selfраньше? Или должно бытьthis?