通过 Ajax 提交表单后，提交按钮被冻结答案

【问题标题】：Submit button gets freezed after submitting the form via Ajax通过 Ajax 提交表单后，提交按钮被冻结
【发布时间】：2019-03-31 13:31:36
【问题描述】：

当我在 ROR 中使用 jQuery-Ajax 提交表单时，提交按钮被冻结。我在练习"Integrating Ajax and Rails: A Simple Todo List App"，由GitHub提供。

class TodosController < ApplicationController
    def create
        #binding.pry
        @todo = Todo.create(todo_params)

        respond_to do |format|
            format.html {redirect_to home_path}
            format.js {}
        end
    end

    private

    def todo_params
        params.require(:todo).permit(:description, :priority)
    end
end

index.html.erb

<h2>Create Todos</h2>
<%= render 'new' %>

<h2>Todos List</h2>
<ul>
    <%= render @todos %>
</ul>

_new.html.erb

<%= form_for Todo.new, html: {id: "form1"} do |f| %>
<p>
    <%= f.label :description %>
    <%= f.text_field :description %>
</p>
<p>
    <%= f.label :priority %>
    <%= f.text_field :priority %>
</p>
<p>
    <%= f.submit 'Submit' %>
</p>
<% end %>

_todo.html.erb

<li>
    <%= todo.description %><br>
    <strong>Priority:</strong><%= todo.priority %><br>
    <%= link_to 'done', todo_path(todo) , method: 'delete' %>
</li>

create.js.erb

$("ul").append("<%= j render partial: 'todo', locals: {todo: @todo} %>");

app/assets/javascript/todos.js

$(function(){
    $("#form1").submit(function(event){
    event.preventDefault();

    let method = $(this).attr('method');
    let action = $(this).attr('action');
    let description = $(this).find('#todo_description').val();
    let priority = $(this).find('#todo_priority').val();
    let data = $(this).serializeArray();

    $.ajax({
        method: method,
        url: action,
        data: data,

        dataType: 'script'
    });
  });
});

【问题讨论】：

快速旁注：您应该使用destroy 而不是delete。 delete 跳过你不想要的回调。

标签： javascript jquery ruby-on-rails ajax

【解决方案1】：

按钮被冻结是因为现在有一个 jquery 脚本禁用它以防止多次提交。检查单击提交按钮时添加的任何类/属性，然后将一些 jquery 放入您的 create.js.erb 以删除它们，如果您想提交新的待办事项，还清除字段。

【讨论】：