Symfony7中使用AssetMapper实现页面加载JS，点击链接后失效

核心原因 #

你遇到的问题是Symfony默认集成的Turbo Drive导致的：Turbo会拦截页面内的链接点击，通过AJAX请求获取目标页面HTML，仅替换页面的<body>或指定turbo-frame内容，而非触发全页刷新。这就造成：

• 首次加载时的DOMContentLoaded事件不会在AJAX跳转后再次触发
• Stimulus控制器默认仅在页面首次加载时连接新DOM元素，跳转后新增/替换的元素不会自动被识别

针对普通JS颜色切换器的解决方法 #

1. 将初始化代码封装为独立函数

   function initColorSwitcher() {
     // 你的颜色切换器初始化逻辑
     // 比如绑定点击事件、读取本地存储的主题色等
   }
   

2. 监听Turbo专属事件，确保跳转后重新执行初始化

   // 首次全页加载时执行
   document.addEventListener('DOMContentLoaded', initColorSwitcher);
   // Turbo跳转完成后执行（包括AJAX跳转和全页刷新）
   document.addEventListener('turbo:load', initColorSwitcher);
   

3. 可选：清理旧事件避免内存泄漏

   document.addEventListener('turbo:before-render', () => {
     // 移除之前绑定的颜色切换器事件监听
     // 比如获取切换按钮，移除click事件等
   });
   

针对Stimulus控制器的解决方法 #

Stimulus原生兼容Turbo，只需遵循它的生命周期钩子即可：

1. 确保控制器通过data-controller属性绑定到DOM元素上
2. 使用connect()钩子执行初始化逻辑——每次元素被添加到DOM（包括Turbo跳转后的新元素）都会触发该方法
3. 使用disconnect()钩子清理资源，避免内存泄漏

   // assets/controllers/color-switcher_controller.js
   import { Controller } from '@hotwired/stimulus';
   
   export default class extends Controller {
     connect() {
       // 初始化颜色切换器逻辑，每次挂载都执行
       this.setupSwitcher();
     }
   
     disconnect() {
       // 清理事件监听、定时器等资源
     }
   
     setupSwitcher() {
       // 你的颜色切换器具体实现
     }
   }
   

补充说明 #

DOMContentLoaded仅在浏览器首次加载整个文档时触发，而Turbo跳转时并未重新加载document对象，只是替换了内部DOM内容，所以该事件不会再次触发。Turbo提供的turbo:load才是适配AJAX跳转的正确事件，会在每次页面内容加载完成时触发。

内容的提问来源于stack exchange，提问作者537mfb