Как добавить 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-код непосредственно в исходный код (и не пытаюсь внедрить его в DOM). Я что-то упускаю? Нужно ли создавать каждый отдельный элемент, затем добавлять его через appendChild, а затем добавить еще один элемент в этот новый элемент? Кажется, немного затянуто: /

Спасибо

Answer 1

Вы можете добавить прослушиватель в контейнер и использовать пользовательские свойства для определения роли элемента и его идентификатора:

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>