Есть кнопка, которая динамически создает кнопки, добавляет к существующему диву, вешает на них EventListener, и сохраняет все в localStorage.
При создании все работает как нужно, созданные кнопки реагируют на нажатие, но если обновить страницу, их прослушиватель пропадает.
Как можно сохранить на них прослушиватель после обновления страницы? Прописать onclick непосредственно в сам шаблон тега работает замечательно, но все же интересна альтернатива.
*Такая форма создания кнопки связана с тем, что в моем учебном проекте таким образом создается сразу древо тегов.
<body>
<button class="buttonCreate">Create</button>
<div class="div"></div>
<script>
const div = document.querySelector(".div");
const buttonCreate = document.querySelector(".buttonCreate");
buttonCreate.addEventListener("click", createButton);
function createButton() {
div.insertAdjacentHTML("afterbegin", "<button class='button'>button</button>"); //*
div.querySelector(".button").addEventListener("click", () => alert("I`m button"));
updateStorage();
}
function updateStorage() {
let innerDiv = div.innerHTML;
localStorage.setItem("div", JSON.stringify(innerDiv));
};
window.addEventListener("load", () => {
div.innerHTML = JSON.parse(localStorage.getItem("div"));
});
</script>
</body>