Rails data-disable-with re-enable 按钮

Question

我有一个带有 javascript 验证的 Rails Devise 表单。当用户按下提交时，验证工作并且用户重新关注他们需要的表单。

但是，rails 使用 data-disable-with 在按钮被点击后禁用它，因此在验证后用户不能再点击提交。我正在尝试设置某种侦听器来检查按钮何时被禁用，稍等片刻以防止双击，然后重新启用按钮。

我已经尝试了很多次代码迭代，我尝试的最近一次是：

      $(document.on("ajax:success", "new_supplier", function() {
      var button;

      button = $(this).find('.btn-sign-up');
      setTimeout((function() { return button.disabled=false; }),1);


      });

但是没有成功，之前我尝试只为按钮添加一个监听器：

      var button = document.getElementById('btn-sign-up');
      button.addEventListener("click", enableButton);

      function enableButton() {
          if (button.disabled)
          {
              window.setTimeout(enable(), 2000);
          }
      }


      function enable() {
          button.disabled=false;
      }

但这失败了，因为它在禁用按钮的功能（隐藏在 rails ether 中）之前运行，因此不起作用。

我的提交按钮很简单：

    <%= f.submit "Create my account", class: 'btn-sign-up', id: 'btn-sign-up' %>

有人可以帮我吗？我想如果我可以禁用此页面的 jQuery_ujs 会起作用，但不确定我是否可以这样做。

Answer 1

Rails 5 中更改了此行为，现在它默认禁用提交。

我建议使用以下配置，而不是接受的答案：

config.action_view.automatically_disable_submit_tag = false

或者，要针对特定​​按钮临时执行此操作，请将其添加到提交按钮

data: { disable_with: false }

Answer 2

这有助于提示我要查找的内容。如果有人正在寻找如何在您的 html.erb 文件中更正此问题，这是我的解决方案：

<p>
  <%= f.submit 'Submit', data: { disable_with: false } %>
</p>

Answer 3

看看我的回答。

$button = $('#someId')
$.rails.enableElement($button)
$button.removeAttr('disabled')

https://stackoverflow.com/a/44318786/4349494

Answer 4

我设法很简单地解决了这个问题。我刚进去并使用代码从按钮中删除了 data-disable-with：

    $('#my-button').removeAttr('data-disable-with');

然后在准备提交表单时重新建立属性，以防止双击创建重复。