Rails 7中Simple_form提交返回后按钮失效问题求助

这个问题的核心是Rails 7默认启用的Turbo Drive在页面导航时会缓存页面，当你从Show页返回列表页时，Turbo直接从缓存恢复页面，导致原本绑定在表单、按钮上的JavaScript事件（比如Simple Form的交互逻辑、Turbo的表单提交处理）没有重新初始化，所以按钮失效。

下面是几个直接有效的解决办法：

方法1：禁用列表页的Turbo缓存 #

在你的列表页视图的<head>部分添加以下meta标签，强制Turbo返回时重新加载页面，而不是使用缓存：

<meta name="turbo-cache-control" content="no-cache">

这个方法最简单，适合新手，不需要写额外的JavaScript。

方法2：利用Turbo事件重新初始化交互 #

如果不想禁用缓存，可以通过Turbo提供的事件钩子，在页面渲染完成后重新初始化表单的JavaScript逻辑。在你的应用JavaScript文件（比如app/javascript/application.js）中添加：

document.addEventListener('turbo:render', function() {
  // 重新初始化Simple Form的表单控件
  document.querySelectorAll('form.simple_form').forEach(form => {
    // 触发Simple Form的初始化逻辑
    if (typeof SimpleForm !== 'undefined') {
      SimpleForm.initForm(form);
    }
    // 确保Turbo的表单提交处理正常工作
    Turbo.connectStreamSource(form);
  });
});

这个方法保留Turbo的缓存优势，同时修复事件绑定问题。

方法3：检查表单的Turbo属性 #

确保你的表单没有被意外设置为data-turbo="false"，如果有，去掉这个属性，或者显式设置为true：

<%= simple_form_for investment, url: investment_path(investment), method: :patch, data: { turbo: true } do |f| %>

另外，之前添加的data: { disable_with: false }可以保留，它只是防止按钮提交后被禁用，和当前的失效问题无关。

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