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.