时间戳

首页 > 解决方案 > 使用 addEventListener 加载 HTML 内容的问题

javascript - 使用 addEventListener 加载 HTML 内容的问题

问题描述

在下面的代码中，我希望每个按钮都提醒自己的 id。问题是在所有其他按钮中只有第一个按钮的 id 被提醒。

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


function addElement() {

  di3 = rngc(10, 100001);

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

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

function al(x) {
  console.log(x);
}




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;
}
<button id="button" type="button">add</button>
<div id="demo"></div>

注 1：我的实际代码将许多 html 元素加载为一个字符串。更新：我不想使用 onclick 属性；addEventListener 是我的目标。

标签： javascriptaddeventlistener

解决方案

您可以使用此答案，它将解决您的问题

<script type="text/javascript">

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


function addElement() {

  di3 = rngc(10, 100001);

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

  document.getElementById(di3).addEventListener("click", function() { al(this.id) } , false);       
}

function al(x) {

    alert(x);
}




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;
}
</script>

推荐阅读