Event Listeners Not Working After Browser Back Navigation in Laravel Docker Project (bfcache Issue)

I’m working on a Laravel project that’s running in a Dockerized environment with an Apache server. Everything works fine when I navigate the app normally. However, I run into issues when using the browser’s back button.

Specifically, JavaScript event listeners that I have attached on certain DOM elements stop working when I navigate back using the browser’s back button. The problem seems to be related to the browser’s Back-Forward Cache (bfcache), which doesn’t seem to fully reload the page or reattach the event listeners when I navigate back to it.

document.addEventListener('DOMContentLoaded', async () => {
        const connectButton = document.getElementById('connectButton');
        const copyIcon = document.getElementById('copyIcon');

        setupEventListeners();

        if (connectButton) {
            connectButton.addEventListener('click', connect);
        }

        if (copyIcon) {
            copyIcon.addEventListener('click', async () => {
                try {
                    await navigator.clipboard.writeText(getUserWallet());
                    alert('{{ __('trans.navbar.wallet_address_copied') }}');
                } catch (error) {
                    alert('{{ __('trans.navbar.copy_failed') }}');
                }
            });
        }
    });

this is my code it works totally fine when i normally navigate but the listeners doesn’t work when i try to go back to the previous page using browser back. Any Suggestions?

Environment:
Laravel 11 running inside Docker with an Apache server.
Browser: Chrome.
Frontend: Vanilla JavaScript for handling events.