时间戳

首页 > 解决方案 > 如何检测动态创建的 HTML 元素被点击

javascript - 如何检测动态创建的 HTML 元素被点击

问题描述

我知道有一些简单的方法可以检测对任何 HTML 元素的点击，如下所示：

    document.getElementById("submit")
    .addEventListener("click", function(event) {
    alert("Submit button is clicked!");
    event.preventDefault();
  });

但是，如果我让用户在可以输入自定义字符串的站点上创建 html 元素，并且这些元素的 id 是随机生成的，如下所示：

    let unique_id = uuidv4()
    

    let invisibilityIcon = document.createElement("IMG")
    invisibilityIcon.setAttribute("src", "icons/eye-off.svg")
    invisibilityIcon.setAttribute("height", "24")
    invisibilityIcon.setAttribute("width", "24")
    invisibilityIcon.setAttribute("style", "float: right; margin-left: 20px; margin-top: 12px; 
    position: relative; margin-right: 20px")
    invisibilityIcon.setAttribute("id", unique_id )

这只是用户可以在我的网站上创建的众多元素之一，它是一个眼睛 svg 图标，每次用户创建一个新图标时都会生成一个唯一 ID。我想检测何时单击此图标并收集其 id 值以进一步使用它，这可能吗？

标签： javascripthtmldom

解决方案

添加到 invisibilityIcon 事件监听器

let unique_id = uuidv4()
let arrayIds = []  

let invisibilityIcon = document.createElement("IMG")
invisibilityIcon.setAttribute("src", "icons/eye-off.svg")
invisibilityIcon.setAttribute("height", "24")
invisibilityIcon.setAttribute("width", "24")
invisibilityIcon.setAttribute("style", "float: right; margin-left: 20px; margin-top: 12px;position: relative; margin-right: 20px")
invisibilityIcon.setAttribute("id", unique_id )
invisibilityIcon.addEventListener("click",function(e){
    //do what you need
    arrayIds.push(e.target.id);
    //or
    arrayIds.push(this);
})

推荐阅读