javascript - 如何将 HTML 附加到 div，同时仍然允许监听器工作？

Question

我想将以下 HTML 附加到 div:

var map_div =
"<div class=\"maps\">"
  + "<h2>View marker <button class=\"close\" data-what=\"maps\">[ close ]</button></h2>"
  + "<div class=\"the-contents\" id=\"mapDiv" + link_id + "\"></div>"
+ "</div>";

我可以这样做:

document.getElementById("listing"+link_id).insertAdjacentHTML('beforeend', map_div );

这会正确地将 HTML 添加到 div 中 - 但这样做有一个问题，因为它似乎无法让监听器保持在 button.close 上。如果我将该 HTML 直接放入原始代码中(并且不要尝试将其注入(inject) DOM)，则效果很好。我有什么遗漏的吗？我是否需要创建每个单独的元素，然后通过 appendChild 添加它，然后将另一个元素添加到该新元素中？好像有点啰嗦:/

谢谢

Answer 1

您可以向容器添加监听器并使用自定义属性来识别元素的 Angular 色和 ID:

document.querySelector("button").addEventListener(
  "click",
  e=>addItem(++startID)
)

var startID=0;
const container = document.getElementById("container");
const addItem = itemID => {
  const el = document.createElement("div");
  el.innerHTML = `
  <a href="#" data-role="say-hi" data-id="${itemID}">say hi</a>
  <a href="#" data-role="remove" data-id="${itemID}">remove</a>
  ${itemID}
  `;
  el.setAttribute("data-link-container-id",itemID);
  container.appendChild(el);
}

const handleClickable = e => {
  e.preventDefault();
  const id= e.target.getAttribute("data-id");
  console.log("hello:",id);
}
const handleRemove = e => {
  e.preventDefault();
  const id= e.target.getAttribute("data-id");
  container.querySelector(`[data-link-container-id="${id}"]`).remove();
}
//add event listener to container and use data-role to see what's clicked
container.addEventListener(
  "click",
  e=>{
    const role = e.target.getAttribute("data-role");
    if(role==="say-hi"){
      return handleClickable(e);
    }
    if(role==="remove"){
      return handleRemove(e);
    }
  }
)

<div id="container">
  <button>add</button>
</div>