Why am I loosing attached event listeners on back/forward button press?

[dgvirtual]

I have a website that I am trying to migrate to htmx. And I am running into maddening issues ;-)

I have implemented navigation using hx-boost and it seems to work fine until I decide to use browser buttons for navigation. Then suddenly all the attached events disappear...

So I have included this example script into the page header:

        document.addEventListener('htmx:afterSwap', function(event) {
            console.log('addEventToTempTarget run on htmx afterSwap');
            addEventToTempTarget();
        });

        window.addEventListener("DOMContentLoaded", (event) => {
            console.log('addEventToTempTarget run on domContentLoaded')
            addEventToTempTarget();
        });

        function addEventToTempTarget() {
            const tempTarget = document.body.querySelector('#tempTarget');
            tempTarget.addEventListener('click', event => {
                console.log('click on #tempTarget');
            });
        }

when navigating using (boosted and unboosted) links I can see the event listener being added to the element in the swapped body id "tempTest" and when I click the element, I get a corresponding console.log entry. However, when I press "Back" button in the browser, the page that comes back does not have the event listener attached to the element and console shows no logs that go with processing of my script.

As my website uses bootstrap 5, I can see that the bootstrap javascript does continue to work (menus do open, css classes are swapped as before). But neither my script, nor more complicated JS scripts that I have included myself, like datatables, – they do not work any longer.

What is it that I am missing here? how do I make the browser navigation not break my site?

[matmosci]

Did you try htmx:historyRestore?