使用Bootstrap5模态框/Jquery在Django中删除客户记录失败

你的代码存在几个关键问题，导致点击确认删除按钮后无反应，逐一解决如下：

1. 按钮type属性冲突 #

模态框内的确认按钮同时设置了type="button"和type="submit"，浏览器会忽略重复属性，仅识别第一个type="button"，导致按钮无法触发表单提交。

修复：
删除按钮的type="button"属性，仅保留type="submit"：

<button type="submit" class="btn btn-danger" id="deleteCustomerButton{{customer_record.id}}">Yes, I want to delete</button>

2. JQuery选择器错误与冗余逻辑 #

• 你的JQuery代码使用$('#deleteCustomerButton')选择按钮，但实际按钮ID是动态生成的deleteCustomerButton{{customer_record.id}}，选择器无法匹配到目标元素。
• 在按钮点击事件内绑定表单提交事件属于冗余逻辑，表单提交后页面会自动跳转，移除模态框的操作没有必要。

修复：
直接移除这段JQuery代码（普通表单提交不需要额外JS）。如果需要保留交互逻辑，改用类选择器简化绑定：

<script>
$(document).ready(function () {
  // 给所有删除确认按钮绑定事件
  $('.delete-submit-btn').on('click', function() {
    $(this).closest('form').submit();
  });
});
</script>

同时给按钮添加对应class：

<button type="submit" class="btn btn-danger delete-submit-btn" id="deleteCustomerButton{{customer_record.id}}">Yes, I want to delete</button>

3. 删除触发按钮的href优化 #

触发模态框的a标签带有href="{% url 'delete_record' customer_record.id %}"，虽然不会直接跳转，但为避免意外情况，建议修改为：

<a href="javascript:void(0)" class="btn btn-danger btn-sm deleteCustomer" data-bs-toggle="modal" data-bs-target="#deleteCustomer{{customer_record.id}}">Delete Customer</a>

4. Django视图验证 #

确保delete_record视图正确处理POST请求，示例代码：

from django.shortcuts import get_object_or_404, redirect
from .models import CustomerRecord

def delete_record(request, record_id):
    record = get_object_or_404(CustomerRecord, id=record_id)
    if request.method == 'POST':
        record.delete()
        return redirect('customer_list')  # 重定向到客户列表页
    return redirect('customer_list')

完成以上修改后，点击确认删除按钮即可正常提交表单，完成客户记录删除并跳转页面。

内容的提问来源于stack exchange，提问作者klauscode