Rails 6.1.7.2中自定义JS已加载但功能失效问题排查

1. 先解决重复加载问题 #

Rails 6.1默认使用Webpacker管理JavaScript资源，你对应的视图JS文件已经被Webpack打包进主bundle，立即移除<%= javascript_include_tag "custom.js", defer: true %>，避免重复加载引发的代码冲突。

2. 修正JS执行时机 #

Rails 6默认集成Turbo（原Turbolinks），且Webpack打包的JS会在DOM完全渲染前执行，直接写DOM操作代码会找不到目标元素。按以下方式调整：

方式一：监听DOM加载完成事件 #

将控制代码包裹在DOMContentLoaded监听内：

document.addEventListener('DOMContentLoaded', function() {
  const toggleCheckbox = document.getElementById('your-checkbox-id');
  const targetDiv = document.getElementById('target-div-id');

  if (toggleCheckbox && targetDiv) {
    // 初始化状态
    targetDiv.style.display = toggleCheckbox.checked ? 'block' : 'none';
    // 绑定切换事件
    toggleCheckbox.addEventListener('change', function() {
      targetDiv.style.display = this.checked ? 'block' : 'none';
    });
  }
});

方式二：适配Turbo的页面加载事件 #

由于Turbo会在页面切换时复用JS上下文，使用turbo:load事件确保代码在每次页面渲染完成后执行：

document.addEventListener('turbo:load', function() {
  const toggleCheckbox = document.getElementById('your-checkbox-id');
  const targetDiv = document.getElementById('target-div-id');

  if (toggleCheckbox && targetDiv) {
    targetDiv.style.display = toggleCheckbox.checked ? 'block' : 'none';
    toggleCheckbox.addEventListener('change', function() {
      targetDiv.style.display = this.checked ? 'block' : 'none';
    });
  }
});

进阶：使用事件委托避免重复绑定 #

如果页面存在动态加载元素，或者Turbo导航后事件丢失，改用事件委托：

document.addEventListener('turbo:load', function() {
  document.addEventListener('change', function(e) {
    if (e.target.id === 'your-checkbox-id') {
      const targetDiv = document.getElementById('target-div-id');
      if (targetDiv) {
        targetDiv.style.display = e.target.checked ? 'block' : 'none';
      }
    }
  });
});

3. 验证元素选择器正确性 #

通过浏览器开发者工具的元素面板，确认JS中使用的id/class与视图中实际渲染的元素完全匹配（Rails表单字段会自动生成如model_attribute格式的id，避免拼写错误）。

4. 确认Webpacker打包配置 #

• 确保自定义JS文件被正确导入到app/javascript/packs/application.js中，例如：

  // 如果文件路径是app/javascript/custom.js
  import '../custom';
  

• 布局文件中已正确加载Webpack打包后的资源：

  <%= javascript_pack_tag 'application', 'data-turbo-track': 'reload' %>
  

5. 清除Docker环境缓存 #

Docker容器可能缓存旧的静态资源，执行以下命令并重启容器：

# 清除旧的编译资源
rails assets:clobber
# 重新编译资源
rails assets:precompile
# 重启Web容器（根据你的Docker配置调整命令）
docker-compose restart web

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