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

**URL:** https://discuss.hotwired.dev/t/non-turbo-event-listeners-are-deleted-after-clicking-an-a-element/5540
**Category:** Links
**Created:** [January 3, 2024, 6:05pm UTC](https://discuss.hotwired.dev/t/non-turbo-event-listeners-are-deleted-after-clicking-an-a-element/5540 "2024-01-03T18:05:33Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![hamax97](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/hamax97/32/3579_2.png) [@hamax97](https://discuss.hotwired.dev/u/hamax97)
#### Post date: [January 3, 2024, 6:05pm UTC](https://discuss.hotwired.dev/t/non-turbo-event-listeners-are-deleted-after-clicking-an-a-element/5540/1 "2024-01-03T18:05:33Z")

</div>

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:

```js
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!

---

<div class="post-metadata">

### Author: ![hamax97](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/hamax97/32/3579_2.png) [@hamax97](https://discuss.hotwired.dev/u/hamax97)
#### Post date: [January 3, 2024, 6:29pm UTC](https://discuss.hotwired.dev/t/non-turbo-event-listeners-are-deleted-after-clicking-an-a-element/5540/2 "2024-01-03T18:29:10Z")

</div>

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.