时间戳

首页 > 解决方案 > 在 Vanilla JS 中多次触发事件

javascript - 在 Vanilla JS 中多次触发事件

问题描述

我有一个使用 Vanilla JS 的代码。我使用一个按钮添加了动态内容。但问题是当我点击一个动态生成的内容时，它会返回第一次点击：1 第二次点击：3 第三次点击：6 第四次点击：10

但它应该是 1, 2, 3, 4

HTML 代码如下：

<p>Add Content</p>
  <div class="dynamic-content">

JS文件如下：

let counter = 1;
document.querySelector("p").addEventListener("click", function(){
  document.querySelector(".dynamic-content").innerHTML += `
    <span>My dynamic content - ${counter}</span>
  `;
  counter++;
});

document.querySelector("body").addEventListener("click", function(){
  let contentList = document.querySelectorAll(".dynamic-content span");
  if(contentList.length){
    contentList.forEach(function(el){
      el.addEventListener("click", function(event){
        console.log(event.target.innerText);
      });
    });
  }
});

注意：我们不能使用 jQuery

v

标签： javascripteventsdynamic-content

解决方案

let counter = 1;
document.querySelector("p").addEventListener("click", function(){
  const element = document.createElement("span") 
  element.innerHTML += `My dynamic content - ${counter}`;
  document.querySelector(".dynamic-content").appendChild(element)
  element.addEventListener("click", function(){
     console.log('element')
     // here logic
  })
  counter++;
});

https://www.w3schools.com/jsref/met_document_createelement.asp 尝试使用document.createElement，然后将事件添加到创建的元素中，在此解决方案中，您只会将一个事件添加到 HTML 标记中。

推荐阅读