JavaScript动态添加div后click事件单次点击多次触发问题求助

问题根因 #

1. 事件重复绑定：RefreshClickEvent 每次执行都会遍历页面中所有已存在的.each-article元素，给每个元素新增一次点击监听。每新增一个元素就会执行一次该函数，原有元素上绑定的监听数量会逐次叠加，点击时自然会触发多次，次数越来越多。
2. 元素创建逻辑错误：你先通过document.createElement创建了DOM节点并设置了class，下一行直接把single_article变量赋值为HTML字符串，appendChild传入字符串会直接抛出类型错误，无法正常添加元素。

解决方案 #

最优方案：使用事件委托（推荐）

只需要给父元素绑定一次事件，利用事件冒泡特性自动适配后续新增的元素，无需每次新增元素都重复绑定：

// 页面初始化时执行一次即可，后续新增元素无需额外操作
document.getElementById('prices-summary').addEventListener('click', (e) => {
  if (e.target.closest('.each-article')) {
    console.log("Trigger.");
    // 此处填写你的业务逻辑
  }
})

// 简化后的AddArticle逻辑
function AddArticle() {
    let single_article = document.createElement("div");
    single_article.setAttribute("class", "each-article");
    single_article.innerHTML = `<div> ANY ARTICEL </div>`;

    let prices_summary = document.getElementById('prices-summary');
    prices_summary.appendChild(single_article);
}

方案二：仅给新元素绑定事件

如果不想用事件委托，直接在创建新元素的时候单独给它绑定事件即可，不要遍历所有已有元素重复绑定：

function AddArticle() {
    let single_article = document.createElement("div");
    single_article.setAttribute("class", "each-article");
    single_article.innerHTML = `<div> ANY ARTICEL </div>`;
    // 直接给新创建的元素绑定事件
    single_article.addEventListener('click', () => {
      console.log("Trigger.");
    });

    let prices_summary = document.getElementById('prices-summary');
    prices_summary.appendChild(single_article);
}

内容的提问来源于stack exchange，提问作者ZBop