Ruby on Rails应用点击erb链接JS不加载，刷新页面才生效问题

Rails默认内置的Turbo（Rails7及以上版本）或Turbolinks（Rails5、6版本）属于PJAX类优化组件，点击页面链接时不会触发完整页面重载，只会异步请求新页面内容替换<body>部分、合并<head>资源。你写的JS代码如果绑定的是DOMContentLoaded、$(document).ready()这类仅在整页加载完成时触发的事件，就只会在首次进入站点、手动刷新页面时执行，Turbo/Turbolinks触发的页面跳转不会重新执行对应JS逻辑，就会出现跳转后JS不运行的问题。

• 方案1：将JS绑定到Turbo/Turbolinks专属的页面加载事件（最推荐，可保留性能优化能力）
  若使用Turbo（Rails7+默认），将原来的JS逻辑包裹在以下事件监听内：

  document.addEventListener('turbo:load', () => {
    // 原有需要在页面加载完成后执行的JS代码
  })
  

  若使用Turbolinks（Rails5、6默认），替换为对应事件即可：

  document.addEventListener('turbolinks:load', () => {
    // 原有需要在页面加载完成后执行的JS代码
  })
  

• 方案2：给指定跳转链接禁用Turbo/Turbolinks
  如果仅部分链接跳转后JS不生效，可直接给对应erb链接添加禁用属性，点击后会走整页刷新逻辑：

  <!-- Turbo版本写法 -->
  <%= link_to "目标页面", your_page_path, data: { turbo: false } %>
  
  <!-- Turbolinks版本写法 -->
  <%= link_to "目标页面", your_page_path, data: { turbolinks: false } %>
  

• 方案3：全局禁用Turbo/Turbolinks（不推荐，会降低页面加载性能）
  Rails7+ 打开app/javascript/application.js，删除import "@hotwired/turbo-rails"代码行即可。
  Rails5/6 打开Gemfile删除gem 'turbolinks'，再打开app/javascript/packs/application.js删除require("turbolinks").start()相关代码，重新打包资源即可生效。

内容的提问来源于stack exchange，提问作者Pradeep Rayapudi