Django with Bootstrap 2nd Modal（或後續模式）不起作用

使用Django for循環它從數據庫生成分頁列表。這工作。生成的列表在每個條目的右側都有一個刪除按鈕。Django with Bootstrap 2nd Modal（或後續模式）不起作用

在相同的頁面加載我使用django for循環來生成匹配每個刪除按鈕的單個模態窗口。所以這個按鈕會調用模態ID = ###，並且有一個匹配的模態###。 HTML看起來很完美。

當我刪除TOP（頁面上的第一個條目）時，它就像一個魅力，我可以整天這樣做，條目移動並被刪除。

問題：當我選擇第二個位置或更低的按鈕時，屏幕變灰並凍結，需要重新加載以再次響應。這種模式是可重複的。

HTML：

{% load static %} 


{% block content %} 
<link rel="stylesheet" href="{% static "css/cabinet_table.css"%}"> 
<div class="col-lg-2"> 
</div> 
<div class="col-lg-8"> 
    <div class="table-responsive"> 
    <table class="table table-hover"> 
     <th colspan="3"style="text-align: center;"><h2>{{ user.username|capfirst }} Notes</h2></th> 
     {% for note in note_list %} 
     <tr> 
      <td ><a href="{% url "cabinet:note_edit" note.id %}">{{ note.title }}</a></td> 
      <td>{{ note.text|truncatewords:15 }}</td> 
      <td><button type="button" class="btn btn-info btn-success" data-toggle="modal" data-target="#deleteModal{{ note.id }}">Delete</button></td> 

     </tr> 
     {% endfor %} 
    </table> 
    </div> 


<!-- Pagination below --> 
    {% if note_list.has_other_pages %} 
    <ul class="pagination"> 
     {% if note_list.has_previous %} 
     <li><a href="?page={{ note_list.previous_page_number }}">&laquo;</a></li> 
     {% else %} 
     <li class="disabled"><span>&laquo;</span></li> 
     {% endif %} 
     {% for i in note_list.paginator.page_range %} 
     {% if note_list.number == i %} 
      <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li> 
     {% else %} 
      <li><a href="?page={{ i }}">{{ i }}</a></li> 
     {% endif %} 
     {% endfor %} 
     {% if note_list.has_next %} 
     <li><a href="?page={{ users.next_page_number }}">&raquo;</a></li> 
     {% else %} 
     <li class="disabled"><span>&raquo;</span></li> 
     {% endif %} 
    </ul> 
    {% endif %} 
    </div> 
    <div class="col-lg-2"> 
    </div> 

{% include 'cabinet/_note_list_modal.html' %} 


{% endblock %}

附送HTML（模態代）：

{% for note in note_list %} 

<!-- Modal {{ note.id }} --> 
<div class="modal fade" id="deleteModal{{ note.id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel{{ note.id }}"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel{{ note.id }}">Delete Note</h4> 
     </div> 
     <div class="modal-body"> 
     <h4>Title :</h4> {{ note.title }}<br> 
     <h4>Idea:</h4> {{ note.text|truncatewords:25 }} 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-danger" onclick="settleUp{{ note.id }}()" >Delete</button> 
     </div> 
    </div> 
    </div> 
</div> 
<div id="hiddenForm{{ note.id }}" style="display: none" class="visibility=hidden"> 
    <form class="" action="/fc/delete/{{ note.id }}" name="hiddenForm{{ note.id }}" method="post"> 
    {% csrf_token %} 
    <input type="hidden" name="deleteNote{{ note.id }}" id="deleteNote{{ note.id }}" value="{{ note.id }}"> 
    <!-- <button type="submit" name="betBalance">Update Balance</button> --> 
    </form> 
<script type="text/javascript"> 
    function settleUp{{ note.id }}(){ 
    document.forms.hiddenForm{{ note.id }}.submit() 
    } 
</script> 
{% endfor %}

目的：點擊任意刪除按鈕有它的模態彈出和工作。

感謝您的任何幫助。 PS使用檢查，我不知道如何使用好，我看到在控制檯中沒有錯誤。

來源

2017-06-23 Tony Sherman