addEventListener 不适用于动态加载内容

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 循环，我试图理解为什么会发生这种情况并寻找任何令人信服的解决方案。