Non-turbo event listeners are deleted after clicking an <a> element

Links
1

Hi there!
I’m starting to build web applications using Rails and Turbo. I’m trying to understand how Turbo works underneath because there is a behavior that doesn’t seem obvious and I can’t find an answer in the documentation.

I’m working with simple bootstrap modals and I want to modify the modal’s content dynamically when clicking on the button that opens it, so I have this code:

const addTagModal = document.getElementById('addTagModal')
addTagModal.addEventListener('show.bs.modal', (event) => {
  // modify modal's content
})

This JavaScript code works the first time I click on the button and the modal gets opened. The content is changed accordingly, then I use the modal as a form and submit the form, Turbo intercepts the submission, follows the redirect, renders the page accordingly. But then, when I try clicking on the button to open the modal again, this event handler is not executed. I looked at the list of event listeners before and after, and I noticed that after the first form submission, somehow, the event listener disappeared from the list, therefore, it wouldn’t be executed.

Is this behavior the expected behavior? Is there any reason why I should not use these bootstrap event handlers? I know that if I register this event inside another listener that listens to “turbo:load”, this will work. But why is that happening, why is that bootstrap event listener getting deleted after a fetch from Turbo?

Thanks a lot!

2

I was thinking about it, and it seems like the answer is simple. Turbo replaces the <body>, this new <body> includes a new modal, this new modal doesn’t include my event listener. I’ll try using frames to just replace the part that is supposed to be replaced when submitting the form inside the modal.