HAML模板初始渲染时JavaScript无法执行问题排查求助

核心原因：Turbolinks（或类似无刷新页面加载工具）的影响 #

很多Rails项目默认启用Turbolinks，它通过替换页面内容而非全页刷新提升加载速度，这会导致：

• 首次通过Turbolinks加载页面时，document.ready事件不会触发（因为document在页面首次初始化后就处于ready状态）
• 直接嵌入的顶层console.log如果在Turbolinks内容替换阶段被插入，可能也不会执行（取决于浏览器对动态插入脚本的处理逻辑）

解决方案 #

1. 替换为Turbolinks兼容的事件绑定

把document.ready替换为Turbolinks的turbolinks:load事件，该事件会在每次页面内容加载完成（包括Turbolinks跳转和全页刷新）时触发：

:javascript
  console.log('Inside Javascript')
  document.addEventListener('turbolinks:load', function() {
    console.log('Inside turbolinks:load')
  });

如果仍需使用jQuery：

:javascript
  console.log('Inside Javascript')
  $(document).on('turbolinks:load', function() {
    console.log('Inside turbolinks:load')
  });

2. 验证JS代码是否被正确渲染

初始加载页面后，查看页面源代码，确认:javascript块的内容是否已输出到HTML中。如果没有，检查是否有其他条件逻辑（比如布局的内容渲染规则）导致这段JS被忽略。

3. 调整JS代码的位置

确保:javascript块出现在jQuery（或其他依赖库）之后加载，比如将其放在页面</body>标签前，避免因依赖未加载导致代码执行失败。

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