Tengo un div que se usa para mostrar un área de trabajo para el usuario y el contenido se carga dinámicamente. Cuando intento implementar un botón anterior/atrás, mi contenido se carga, pero si ese contenido contiene un oyente onclick, no se activa.

Mi área de trabajo es un <div id="work-area"></div> vacío

Estoy usando cloneNode() y replaceChild() así:

 const workArea = document.getElementById(`work-area`) let backup = workArea.cloneNode(true) closeWorkArea = () => { workArea.innerHTML = `` backup = workArea.cloneNode(true) workArea.parentNode.replaceChild(backup, workArea) } previous = () => { workArea.parentNode.replaceChild(backup, workArea) }

y cuando cargo una página determinada, creo una copia de seguridad y cargo una plantilla:

 openItem = (index) => { backup = workArea.cloneNode(true) workArea.innerHTML = `` ... const itemPageCard = document.getElementById(`item-page-card`).content.cloneNode(true) // NOTE : I've tried both of these assignments below, neither work itemPageCard.children[2].addEventListener(`click`, () => { promptDelete(index) }) itemPageCard.children[2].setAttribute(`onclick`, `promptDelete(${index})`) ... workArea.appendChild(itemPageCard) }

La función promptDelete() carga una plantilla que contiene un botón que eliminará los datos de los usuarios, así como un botón que llama a previous()

 promptDelete = (index) => { backup = workArea.cloneNode(true) workArea.innerHTML = `` const prompt = document.getElementById(`prompt-delete`).content.cloneNode(true) ... // NOTE : Clicking this does work, and loads the previous page data prompt.children[2].children[0].addEventListener(`click`, () => { previous() }) prompt.children[2].children[1].addEventListener(`click`, () => { deleteItemByIndex(index) }) workArea.appendChild(prompt) }

Una vez que se carga la página anterior, ya no se producen los eventos de clic de la llamada openItem() inicial. Sospecho que es workArea.parentNode.replaceChild(backup, workArea) , pero no sé cómo restaurar esos oyentes. Incluso si uso el método en línea setAttribute('onclick', ..) puedo ver onclick="promptDelete(0)" dentro del html, lo que confirma que se está clonando correctamente, sin embargo, todavía nada

Nota : no puedo simplemente usar openItem() con un índice en lugar de previous() porque también cargo otros tipos de contenido en el área de trabajo