Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

201
Visualizações
js replaceChild preserve click listener or inline onclick method

I have a div that's used to display a work area for the user, and content is loaded dynamically. When trying to implement a previous/back button, my content loads, but if that content contains an onclick listener it doesn't trigger.

My work area is an empty <div id="work-area"></div>

I'm using cloneNode() and replaceChild() like so:

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)
}

and when I load a certain page, I create a backup and load a template:

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)
}

The promptDelete() function loads a template which contains a button that will delete the users data, as well as a button that calls 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)
}

Once the previous page is loaded, the click events from the initial openItem() call no longer occur. I suspect its the workArea.parentNode.replaceChild(backup, workArea), but don't know how to restore those listeners. Even if I use the inline method setAttribute('onclick', ..) I can see the onclick="promptDelete(0)" inside the html, confirming it's cloning correctly, however still nothing

Note : I can't just use openItem() with an index in lieu of previous() because I also load other types of content into the work area

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda