求助：Rails 7.1.3中application.js的jQuery代码无法执行

问题根源 #

Rails 7.1 对比 7.0.x 版本，前端资产加载逻辑（尤其是默认的 Import Maps 机制）有细节调整，要么是 jQuery 未挂载到全局作用域，要么是默认启用的 Hotwire Turbo 干扰了传统的页面加载事件触发逻辑。

具体修复步骤 #

1. 给 jQuery 全局“留位置”（Import Maps 场景） #

如果使用 Rails 默认的 Import Maps：

• 先确认 config/importmap.rb 中已添加 jQuery 的 pin 配置：

  pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.7.1/dist/jquery.js"
  

• 在 app/javascript/application.js 开头手动将 jQuery 挂载到全局，否则代码中的 $ 或 jQuery 会找不到：

  import jquery from 'jquery'
  window.jQuery = jquery
  window.$ = jquery
  

2. 适配 Turbo 的页面加载逻辑 #

Rails 7 默认启用 Hotwire Turbo，它采用局部页面更新而非全页刷新，传统的 $(document).ready() 仅在首次页面加载时触发，后续 Turbo 导航不会执行。将代码改为适配 Turbo 的写法：

// 替换原有的 $(document).ready()
$(document).on('turbo:load', function() {
  // 你的 jQuery 业务代码写在这里
  console.log('jQuery 已执行')
})

若不需要 Turbo，可直接在 app/views/layouts/application.html.erb 中移除 Turbo 相关引用。

3. 检查资产加载状态 #

• 执行 rails assets:precompile 后重启服务器（开发环境可跳过，但生产环境必须执行）。
• 打开浏览器控制台的网络面板，确认 application.js 已成功加载且无 404 或加载错误。
• 在控制台输入 $ 并回车，若返回函数则说明 jQuery 已成功挂载到全局。

4. 回退到传统加载方式（以上方案无效时） #

若 Import Maps 机制存在兼容性问题，可直接在布局文件中引入 jQuery CDN 再加载自定义 JS：
在 app/views/layouts/application.html.erb 的 <body> 末尾添加：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<%= javascript_include_tag 'application', 'data-turbo-track': 'reload' %>

此时 application.js 中的传统 jQuery 代码即可直接运行。

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