Rails 5.2中Uncaught ReferenceError: $ is not defined问题求助

你遇到的这个问题在Rails开发中挺常见的——明明装了jquery-rails也能看到页面里的jQuery脚本标签，可CoffeeScript代码就是找不到$对象。主要问题大概率出在脚本加载顺序或者Turbolinks/Turbo的事件绑定时机上，下面给你几个具体的排查和解决方向：

1. 确认application.js的加载顺序 #

先检查你的app/assets/javascripts/application.js，必须保证jQuery的引入在自定义脚本之前。正确的结构应该类似这样：

//= require jquery
//= require rails-ujs
//= require turbolinks
//= require_tree .

//= require_tree .会按目录顺序加载所有JS/Coffee文件，如果你的campaigns.coffee意外在jQuery之前被加载，就会直接触发$ is not defined的错误。如果是手动引入自定义脚本，一定要把它放在//= require jquery之后。

2. 适配Turbolinks/Turbo的事件绑定逻辑 #

如果你的Rails版本用了Turbolinks（Rails 5-6）或者Turbo（Rails 7+），传统的$ ->（也就是$(document).ready()）的触发时机可能不符合预期——Turbolinks会复用页面容器，初始加载时可能出现jQuery还未完全就绪就执行代码的情况，页面切换时也不会再次触发ready事件。

把你的campaigns.coffee改成适配Turbolinks的写法：

$(document).on 'turbolinks:load', ->
  $("tr[data-link]").click ->
    window.location.replace($(this).data("link"))

如果是Rails 7+使用Turbo，对应的事件是turbo:load：

$(document).on 'turbo:load', ->
  $("tr[data-link]").click ->
    window.location.replace($(this).data("link"))

3. 修复删除按钮的冲突问题 #

顺便提个小细节：当前代码会导致点击行内的删除按钮时，同时触发跳转和删除动作，这显然不是你想要的。可以给点击事件加个判断，阻止按钮触发行跳转：

$(document).on 'turbolinks:load', ->
  $("tr[data-link]").click (e) ->
    # 如果点击的是按钮或按钮内部元素，不执行跳转
    if $(e.target).closest('.btn').length == 0
      window.location.replace($(this).data("link"))

4. 验证jQuery是否真的加载完成 #

如果前面的方法都没用，可以在浏览器控制台直接输入$或者jQuery：

• 如果返回函数，说明jQuery已经正常加载；
• 如果返回undefined，那说明虽然页面有脚本标签，但可能加载失败、有网络错误，或者其他脚本报错中断了jQuery的加载。可以去浏览器的「网络」面板查看jQuery脚本的请求状态，确认是否返回200。

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