I’m trying to implement BootStrap‘s color switcher in Symfony.

I’ve added BootStrap using AssetMapper and everything is working.

I’ve then copied the color switcher from BootStrap‘s examples page into a twig template along with it’s CSS and JS code.

I have a Controller routed to / whose template includes the color switcher template.

Everything appears to work when I open the page in the browser, however if I had a link in that page – to itself or to a different page, doesn’t matter – the color switcher won’t work in the new page, unless I press F5 or reload the page in some other fashion.

I’ve discovered that the JavaScript code that initializes the color switcher is run on the initial page load or when I reload, but when changing pages by clicking a link it does not execute again on the new page.

I’ve tried adding something like:

if (document.readyState !== 'loading') {
    console.log('document is already ready, just execute code here');
    initThemeSwitcher();
} else {
    document.addEventListener('DOMContentLoaded', function () {
        console.log('document was not ready, place code here');
        initThemeSwitcher();
    });
}

and whatching the console again, only on initial page load or a forced reload with this code run.

So my question is: Why will this code only run when the file is fetched from the server and not on moving to a different page (or same page) by clicking a link?