Rails表单提交按钮在try/catch的catch块中无法重新启用怎么办

问题原因及修复方案 #

你遇到的问题本质上是Rails默认的表单提交逻辑与自定义事件处理的时序冲突、以及属性操作方法不规范导致的，按以下步骤修改即可解决：

1. 替换属性操作方法
   jQuery中操作表单布尔属性（如disabled、checked）时，优先使用prop()而非attr()/removeAttr()，前者会修改元素的实时生效状态，后者仅修改HTML初始属性，部分场景下不会触发元素状态更新：

function displayError(action,err){
  // 替换原有的removeAttr写法
  jQuery('input[name=commit]').prop('disabled', false);
  // 兼容Rails UJS的自动禁用逻辑，清除UJS设置的禁用标记
  jQuery('input[name=commit]').removeData('disabled');
};

2. 阻止表单默认提交行为
   如果你的自定义提交逻辑是异步的，没有阻止表单默认的同步提交行为，浏览器会在你执行displayError的同时开始页面跳转，DOM修改会被中断，看起来就像没生效。在submit事件处理函数开头添加阻止默认行为的逻辑：

form.addEventListener('submit', (event) => {
  // 新增：阻止表单默认提交
  event.preventDefault();
  try {
    // 你的原有提交逻辑
  } catch(e) {
    displayError('submit', e);
  }
});

3. 确保事件绑定时机正确
   把事件绑定逻辑放到DOM加载完成的回调中，避免绑定的时候表单/按钮元素还未渲染完成，导致事件绑定失败：

// 原生JS写法
document.addEventListener('DOMContentLoaded', () => {
  const form = document.querySelector('你的表单选择器');
  // 原有事件绑定逻辑
})

// jQuery写法
jQuery(() => {
  const form = jQuery('你的表单选择器');
  // 原有事件绑定逻辑
})

按以上步骤修改后，按钮就可以在异常捕获后正常恢复启用状态了。

内容的提问来源于stack exchange，提问作者opensource-developer