Javascript AJAX提交按钮在一次请求后禁用

我正在构建一个Rails应用程序，并使用AJAX和JQUERY创建了一个Javascript表单。表单正在正确提交，内容正在注入DOM中，但一旦发生这种情况，submit按钮将变灰，在刷新页面之前无法提交新请求

我将代码与我以前构建的应用程序进行了比较，结果完全相同。我能看到的唯一区别是，以前的应用程序是用Rails'4.2.10'构建的，而这个新应用程序使用Rails'5.2.3'

$（'new#u order'）。关于（'submit'，函数（e）{
$.post（this.action，$（this.serialize（））
.完成（功能（响应）{
设o=新订单（响应）
$（“#订单地址”）.val（“”）
$（'order\u special\u instructions'）.val（“”）
$（'#orders'）.append（o.format（））
}).错误（函数（）{
警报（'错误'）
})
e、 预防默认值（）
})

在您的情况下，我认为问题在于您在提交时使用了

e.preventDefault（）

，但您没有用新内容替换此表单。因此，此表单将保持提交状态

由于您使用的是Rails 5.2，我建议您使用

form\u with

而不是jQuery ajax。在Rails中，它默认为ajax请求，您只需在

create.js.erb

中渲染所需的部分内容

它将是这样的：

orders/\u form.erb

<%= form_with model: Order.new, url: orders_path do |f| %>
<%= f.submit %>

let orderForm = "<%= j(render('orders/form')) >";
$('#new_order').html(orderForm);
$('#order_address').val("")
$('order_special_instructions').val("")

let order = "<%= j(render('orders/order')) >"
$('#orders').append(order)

---

不要忘记在您的资产管道中包含rails ujs，或者在您使用webpacker时导入它。

在您的情况下，我认为问题是您在提交时使用了

e.preventDefault（）

，但您没有用新内容替换此表单。因此，此表单将保持提交状态

由于您使用的是Rails 5.2，我建议您使用

form\u with

而不是jQuery ajax。在Rails中，它默认为ajax请求，您只需在

create.js.erb

中渲染所需的部分内容

它将是这样的：

orders/\u form.erb

<%= form_with model: Order.new, url: orders_path do |f| %>
<%= f.submit %>

let orderForm = "<%= j(render('orders/form')) >";
$('#new_order').html(orderForm);
$('#order_address').val("")
$('order_special_instructions').val("")

let order = "<%= j(render('orders/order')) >"
$('#orders').append(order)

---

别忘了在您的资产管道中包含rails ujs，或者在使用webpacker时导入它。

好的，我想出来了。Rails 5在提交请求后自动禁用submit按钮。我必须补充一点

数据：{disable_with:false}

---

到我视图中的“提交”按钮。

好的，我找到了。Rails 5在提交请求后自动禁用submit按钮。我必须补充一点

数据：{disable_with:false}

---

到我视图中的提交按钮。

我建议将

e.preventDefault（）

移动到第一条语句。必须有其他事件处理程序将其变灰，或者如果

#orders

包含该按钮，可能服务器将其设置为禁用。表单上是否有任何验证规则？你能分享视图的代码吗？我还没有添加任何其他偶数处理程序。这是我的第一个堆栈溢出问题，添加更多代码的最佳方法是什么？我建议将

e.preventDefault（）

移动到第一个语句中。如果

#orders

包含该按钮，则必须有其他事件处理程序将其变灰，也许服务器将其设置为禁用表单上是否有任何验证规则？你能分享视图的代码吗？我还没有添加任何其他偶数处理程序。这是我的第一个堆栈溢出问题，添加更多代码的最佳方法是什么？是否有一种方法可以用新内容替换表单（我现在使用的方式）还是用rails 5替换表单是唯一的方法？您可以先取消

e.preventDefault（）

。添加

$（this）.unbind（'submit'）

以在请求结束后取消绑定提交事件。这将使状态恢复正常。并替换jquery中的内容。解除绑定和删除prevent默认值不会成功，这会导致页面刷新，这与使用AJAX的目的背道而驰。我错过什么了吗？很抱歉，我还是一个相当新手的程序员。有没有办法用新内容替换表单？我现在的方式还是rails 5？表单是唯一的方法吗？你可以先取消

e.preventDefault（）

。添加

$（this）.unbind（'submit'）

以在请求结束后取消绑定提交事件。这将使状态恢复正常。并替换jquery中的内容。解除绑定和删除prevent默认值不会成功，这会导致页面刷新，这与使用AJAX的目的背道而驰。我错过什么了吗？对不起，我还是一个相当初级的程序员。