Django 项目中的 Jquery 脚本未检测到表单提交

Question

我正在使用 Django 创建一个网站，并使用 Ajax 来防止在提交表单后重新加载网站。现在，我有订单显示在网站上，每个订单旁边都有一个 x 按钮。单击 x 会取消数据库上的订单（更改值而不是简单地删除它的发布请求）并且还会重新加载放置订单的 div。我在这个网站上有其他可以正常工作的表格（尽管它们确实有字段并且使用了crispyforms）。 我面临的问题是脚本没有检测到表单已提交。

以下是我项目的相关部分：

views.py

class CancelForm(ModelForm):
 class Meta:
    model = Order
    fields = ['Filled']
...
def cancelorder(request, pk):
    form = CancelForm(request.POST)
    if request.is_ajax and request.method == "POST":
        order = Order.objects.get(pk=pk)
        order.Filled = "C"
        instance = order.save(update_fields=["Filled"])
        return JsonResponse({"canceled": pk}, status=200)
    return JsonResponse({"error": ""}, status=400)

urls.py

urlpatterns = [
    path('', views.orderpage, name="order-index"),
    path('cancel_order/<int:pk>/', views.cancelorder, name="cancel_order"),
    path('post/ajax/order/', views.postorder, name = "post_order"),
    path('yourorders/', views.yourorders, name="your_orders"),
    path('allorders/', views.allorders, name="all_orders"),
]

orderpage.html（这是我的主页，在 yourorders.html 上要重新加载 div）

<div class="container-fluid ActiveOrderInfoDiv" id="YourOrdersDiv">
  {% include 'order/yourorders.html' %}
</div>

yourorders.html

{% for order in all_orders %}
  <div class="row">
...
    <div class="col">{{ order.OrderID }}</div>
    <form action="{% url 'order:cancel_order' pk=order.OrderID %}" id="cancel_button" method="POST">
      {% csrf_token %}
      <button type="submit" class="close" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </form>
  </div>
  {% endfor %}

Javascript（此处，从未记录检查 2）

 $(document).ready(function () {
      $("#cancel_button").submit(function (e) {
          console.log("check 2");
          e.preventDefault();
          console.log("check 3");
          $.ajax({
            url: "{% url 'order:your_orders' %}",
            success: function (response) {
              $("#YourOrdersDiv").load("/order/yourorders/");
            },
            error: function (response) {
            }
          });
        });
    });

我的尝试

• 将脚本移至 yourorders.html（我想也许 JS 没有看到 cancel_button ID）
• 使用 console.log 查看流程停止的位置（似乎没有发现取消按钮已提交）
• 添加了 CancelForm 模型表单（之前我在没有模型表单的情况下更新数据库）
• 通常使用 Ajax 语法和顺序来探索
• 查看 StackOverflow 上的其他问题 - 我似乎在关注它们，我的语法可能是正确的，只是没有发现正在提交 cancel_button 表单

Answer 1

您应该将事件处理程序委托给文档级别，以便在重新加载表单时仍然可以处理事件。当您“重新加载”表单时，您正在将一个新元素插入到没有附加事件处理程序的 DOM 中

$(document).on("submit", "#cancel_button", function(e) {
  ...