Javascript My Delete modalForm始终删除数据模型中的第一个对象？（Django）

我使用bootstrap创建了一个模式来删除列表视图中的用户条目，因此我必须在模板中使用for循环进行迭代，以便它总是删除第一个对象，而且它永远不会关闭。如何使每个条目的按钮唯一，使其仅删除此对象

以下是模式：

  {% for obj in patients %}

     <div class="modal fade" id="modalDelete" tabindex="-1" role="dialog" aria-labelledby="modalDelete"
  aria-hidden="true">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Delete patient!</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Are you sure you want to delete this patient?</p>
      </div>
      <div class="modal-footer">
           <form method="POST" action="{% url 'patients:patient_delete' obj.pk %}">
                            {% csrf_token %}
        <input class="btn btn-danger" value="Yes" type="submit" >
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                       </form>
      </div>
    </div>
  </div>
</div>

{% endfor %}

{%患者中的obj%}
删除病人！
&时代；
是否确实要删除此患者

{%csrf_令牌%}
接近
{%endfor%}

这是我的触发按钮：

<button type ="button" class ="btn btn-danger" data-toggle="modal" data-target="#modalDelete" >Delete</button>

删除

您为所有模态表单提供了相同的id。您应该消除歧义，例如，将主键添加到您的id中，如：

{% for obj in patients %}
<div class="modal fade" id="modalDelete{{ obj.pk }}" tabindex="-1" role="dialog" aria-labelledby="modalDelete"
  aria-hidden="true">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Delete patient!</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Are you sure you want to delete this patient?</p>
      </div>
      <div class="modal-footer">
        <form method="POST" action="{% url 'patients:patient_delete' obj.pk %}">
        {% csrf_token %}
        <input class="btn btn-danger" value="Yes" type="submit" >
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endfor %}

{%患者中的obj%}
删除病人！
&时代；
是否确实要删除此患者

{%csrf_令牌%}
接近
{%endfor%}

和作为触发按钮：

<button type ="button" class ="btn btn-danger" data-toggle="modal" data-target="#modalDelete{{ obj.pk }}">Delete</button>

---

Delete

您为所有模态表单提供了相同的id。您应该消除歧义，例如，向id添加主键，如：

{% for obj in patients %}
<div class="modal fade" id="modalDelete{{ obj.pk }}" tabindex="-1" role="dialog" aria-labelledby="modalDelete"
  aria-hidden="true">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Delete patient!</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Are you sure you want to delete this patient?</p>
      </div>
      <div class="modal-footer">
        <form method="POST" action="{% url 'patients:patient_delete' obj.pk %}">
        {% csrf_token %}
        <input class="btn btn-danger" value="Yes" type="submit" >
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endfor %}

{%患者中的obj%}
删除病人！
&时代；
是否确实要删除此患者

{%csrf_令牌%}
接近
{%endfor%}

和作为触发按钮：

<button type ="button" class ="btn btn-danger" data-toggle="modal" data-target="#modalDelete{{ obj.pk }}">Delete</button>

---

删除

非常感谢！顺便说一句，你知道如何在屏幕上居中的模式，因为它现在显示在绝对向上。当我单击“取消”或“关闭”按钮时，它仍然不会关闭。非常感谢！顺便说一句，你知道如何在屏幕上居中的模式，因为它现在显示在绝对向上。当我单击“取消”或“关闭”按钮时，它仍然不会关闭。