Event handlers on dynamically generated DOM element : does not work until page refresh

1

I have a dynamically generated list with delete buttons on each of the list items. The delete button has an event handler to listen for click event. If I create a list item and click on the newly generate items Delete button, nothing happens. The other delete event handlers work fine. On page refresh, the latest delete button also works.

let buttonsList = document.querySelectorAll('.delete')
for (let i = 0; i < buttonsList.length; i++) {
  buttonsList[i].addEventListener('click', (e) => {
    const buttonId = e.target.dataset['id']
    console.log('Event >>> ', e)
    fetch('/todos/' + buttonId + '/delete', {
        method: 'DELETE',
      })
      .then(() => {
        document.getElementById('errorText').className = 'hidden'
        console.log('Got response from server')
        const itemToDelete = e.target.parentElement
        itemToDelete.remove()
      })
      .catch((err) => {
        console.log("Error >>> ", err)
        document.getElementById('errorText').className = ''
      })
  })
}
3

It is a little hard to help without seeing more of the code, but I’m assuming your event listener setup code only runs one time. That doesn’t really work for dynamically created elements. When you add elements dynamically to the DOM you would have to add the event listener again to the new elements.

Use some ancestor element (even the document if needed) that is not added or remove dynamically and add the event listener to it. Then do event delegation (google event delegation).

1 Like
4

@camperextraordinaire I am sharing the repl link
@lasjorg That sounds exactly what is happening. The event listener is not implemented on the newly created items but does work on previous elements. Do you mean to say I should have another event listener on a super element(for the lack of a better term) so that it runs whenever a new element is created?

6

Thanks a lot @lasjorg and @camperextraordinaire for guiding me in the right direction. Event delegation is the way forward for handling events on dynamic elements. :slight_smile:
Also, I am sorry for changing the category, I was under the impression I had chosen the wrong one to begin with.