AddEventListener 对新添加的 innerHtml 不起作用？

Question

关于这个问题有很多问题，它们都涵盖了不同的情况。 None 在这种情况下帮助我。

1.I 我没有在“创建”元素之前添加点击监听器,

2。我没有在事件方法中调用回调（而是以更高阶的方式传递它）

3。 num总是正确的

 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:

Answer 1

通过使用 raceview.innerHTML +=，您将覆盖 raceview 中的所有 DOM 个元素。它们失去了所有事件绑定，因为整个 raceview 元素都被重建了。

我猜最后一个按钮应该有用。

你可以这样解决：

const race = document.createElement("div");
race.classList.add("race");
raceview.appendChild(race);

race.innerHTML = `...`;

document
  .getElementById("race" + num)
  .addEventListener("click", /* your handler */);

AddEventListener 对新添加的 innerHtml 不起作用？

AddEventListener doesn't work on newly added innerHtml?

javascript

onclick