Rails应用出现Uncaught ReferenceError: $ is not defined错误，求解决

嘿，我刚遇到过几乎一模一样的问题！你的报错Uncaught ReferenceError: $ is not defined主要是两个原因：脚本执行顺序不对，或者Turbolinks的页面加载机制和传统的$(document).ready()不兼容。让我一步步给你解决：

1. 先搞定jQuery的加载顺序问题 #

虽然你在application.js里正确引入了jQuery，但如果你的内联脚本放在页面的头部或中间，而application.js是在页面底部加载的（Rails默认这么做），那你的脚本执行时jQuery还没加载完成，自然会报$ is not defined。

解决办法很简单：把你的内联脚本放在application.js的引入标签之后，也就是页面的</body>标签之前。比如在你的布局文件（app/views/layouts/application.html.erb）里，找到这行：

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

然后把你的内联脚本直接写在这行的下面，这样就能保证jQuery已经加载完成了。

2. 适配Turbolinks的正确写法 #

你用了Turbolinks，这玩意儿会让页面切换时不重新加载整个文档，传统的$(document).ready()只会在第一次页面加载时触发，后续通过Turbolinks跳转的页面根本不会执行这个回调，这也是你后面的console.log没打印的原因。

你需要把$(document).ready()换成Turbolinks对应的事件监听，有两种写法：

写法一：用原生JS监听Turbolinks事件 #

<script>
  console.log("got here..."); // 这个能执行是因为它不需要jQuery
  
  // 适配Turbolinks的加载事件
  document.addEventListener('turbolinks:load', function() {
    console.log("got here..."); // 现在应该能正常打印了
  });
</script>

写法二：用jQuery监听Turbolinks事件 #

如果你还是想用jQuery的语法，也可以这么写：

<script>
  console.log("got here...");
  
  $(document).on('turbolinks:load', function() {
    console.log("got here...");
  });
</script>

3. 额外检查点 #

• 确认你的布局文件里确实引入了application.js，而且没有手动把它移到页面头部（头部加载会导致DOM还没准备好，也容易出问题）。
• 有时候Rails的资产缓存会搞鬼，你可以运行rails assets:clean清除缓存，然后重启服务器试试。

这样调整之后，你的脚本应该就能正常运行了！

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