Question

我想动态加载按钮，并且每个按钮都加载有附加的addEventListener和随机生成的ID。这些按钮会发出警报。问题：当我加载（通过单击添加按钮）新按钮时，只有第一个按钮附加了事件监听器吗？这是我的代码：

  <button id="button" type="button" >add</button>
    <div id="demo"></div>



function Pers45on() {
di3=rngc(10,100001);

var yu=document.getElementById('demo').innerHTML;
document.getElementById('demo').innerHTML='<button id="'+di3+'" type="button" >newb</button>'+yu;
document.getElementById(di3).addEventListener('click', al, false);
}

function al(){alert();}

document.getElementById('button').addEventListener('click', function(){Pers45on();}, false);


function rngc(A,B) {
        var d = new Date(),n = d.getMilliseconds();
  return 'ig'+Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0,A)+Math.floor(Math.random() * (B))+n;
}

更新：我提供的示例代码与我的实际问题相同；我试图将许多HTML元素附加为字符串，并且使用createElement可以正常工作，但不是解决方案不切实际。我也有其他可行的解决方案：

objar=[];

function Pers45on() {
di3=rngc(10,100001);
objar.push(di3);

var yu=document.getElementById('demo').innerHTML;
document.getElementById('demo').innerHTML='<button id="'+di3+'" type="button" >'+di3+'</button>'+yu;

document.getElementById(di3).addEventListener('click', al, false);

 for(i=0; i<=objar.length;i++){
document.getElementById(objar[i]).addEventListener('click', al, false);
} 

}

但是我不喜欢for循环，我试图理解为什么会这样，并寻找任何令人信服的解决方案。

Answer 1

根据documentation：

innerHTML：使用方法insertAdjacentHTML()。将HTML插入文档而不是替换元素的内容。

因此，更改此行就足够了：

document.getElementById('demo').innerHTML='<button id="'+di3+'" type="button" >newb</button>'+yu;

收件人：

document.getElementById('demo').insertAdjacentHTML('afterbegin', '<button id="' + di3 + '" type="button" >newb</button>');

function Pers45on() {
    di3 = rngc(10, 100001);

    var yu = document.getElementById('demo').innerHTML;
    document.getElementById('demo').insertAdjacentHTML('afterbegin', '<button id="' + di3 + '" type="button" >newb</button>');
    document.getElementById(di3).addEventListener('click', al, false);
}

function al() {
    alert();
}

function rngc(A, B) {
    var d = new Date(), n = d.getMilliseconds();
    return 'ig' + Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, A) + Math.floor(Math.random() * (B)) + n;
}

document.getElementById('button').addEventListener('click', function () {
    Pers45on();
}, false);

<button id="button" type="button">add</button>
<div id="demo"></div>

Answer 2

您替换按钮而不是附加按钮。这就是它不起作用的原因。您可以使用appendChild选项。

function Pers45on() {
    di3 = rngc(10, 100001);

    var yu = document.getElementById('demo').innerHTML;

    var button = document.createElement('button');
    button.setAttribute("id", di3);
    button.innerText="newb"

    document.getElementById('demo').appendChild(button);

    document.getElementById(di3).addEventListener('click', al, false);
}

addEventListener不适用于内容的动态加载

2 个答案: