Rails 7点击链接跳转后JavaScript失效的无重载解决方案

Rails 7默认集成Turbo（即你代码中导入的@hotwired/turbo-rails），会自动拦截站内链接点击，通过异步请求拉取新页面内容后替换当前DOM，不会触发整页重载。你当前的所有JS逻辑仅在页面首次加载到interactive状态时执行一次，Turbo完成无刷新跳转后，新渲染的DOM元素没有绑定对应的事件监听，功能自然失效；手动重载页面会重新执行全量JS完成事件绑定，所以功能会恢复正常。
你之前尝试给所有链接绑定重载逻辑的方案属于绕开问题本质，不仅维护成本高，还会破坏Turbo的无刷新体验，出现跳转异常。

方案1：监听Turbo生命周期事件，替换原有初始化触发逻辑 #

删掉原有基于document.readyState的初始化判断，改为监听Turbo的页面加载/渲染完成事件，保证首次加载、无刷新跳转后都会执行初始化逻辑，给当前页面的元素绑定事件。
替换application.js末尾的初始化代码：

// 移除原有switch (document.readyState)相关代码，添加以下逻辑
const initPageFunctions = () => {
  PageTransition()
  profileMenu()
  new_post()
  home()
}
// 首次整页加载完成触发
document.addEventListener('turbo:load', initPageFunctions)
// Turbo完成页面内容渲染（含跳转、本地缓存恢复）后触发
document.addEventListener('turbo:render', initPageFunctions)

注意：重复执行初始化会给元素绑定多次事件，导致回调重复触发，可以给已经绑定过事件的元素添加data-bound="true"标记，初始化时跳过已有该标记的元素即可。

方案2：使用事件委托，从根源避免重复绑定问题 #

不要逐个给目标元素绑定事件监听器，直接将事件绑定到不会被Turbo替换的顶层节点（如document），通过事件冒泡机制匹配触发目标，不管后续DOM怎么更新，都不需要重新绑定事件，一次绑定永久生效。
以profileMenu功能为例，改造后的代码不需要每次换页重绑，首次加载时执行一次即可：

// 仅需在页面首次加载时绑定一次
document.addEventListener('click', (e) => {
  // 处理个人资料菜单点击
  if (e.target.closest('.profile')) {
    const menu = document.querySelector(".profile-menu")
    menu.style.display = menu.style.display === "none" ? "block" : "none"
  }
  // 点击内容区关闭个人资料菜单
  if (e.target.closest('.posts')) {
    const menu = document.querySelector(".profile-menu")
    if (menu && menu.style.display === "block") menu.style.display = "none"
  }
  // 其余按钮、交互逻辑都可以按照这个模式改造
})

• 你写的refresh函数存在bug：document.querySelector("a")只会获取页面第一个<a>标签，遍历会直接报错，这个为了绕开Turbo问题写的函数可以直接删除。
• 代码中大量使用window.location.assign做站内跳转，会绕过Turbo的无刷新机制，相当于强制整页跳转，普通站内跳转直接用<a>标签即可，不需要手动写跳转逻辑。
• 给导航按钮添加active类前，需要先移除其他同组按钮的active类，避免出现多个按钮同时高亮的异常。

内容的提问来源于stack exchange，提问作者Abhimanyu Solanki