ブートストラップ付きのDjango第2モーダル（またはそれ以降のモーダル）が機能しない

Django forループを使用するデータベースからページ番号付きリストを生成しています。これは機能します。生成されたリストには、各エントリの右側に削除ボタンがあります。ブートストラップ付きのDjango第2モーダル（またはそれ以降のモーダル）が機能しない

同じページで、django forループを使用して、各削除ボタンと一致する個々のModalウィンドウを生成します。ボタンはモーダルID = ###を呼び出し、一致するモーダル###があります。 HTMLは完全にレンダリングされているようです。

トップ（ページの最初のエントリ）を削除すると、チャームのように機能し、エントリが上がり、削除されるため、1日中長くできます。

問題：2番目の位置またはそれ以下のボタンを選択すると、画面がグレーになり、凍って再び応答するためにリロードする必要があります。このパターンは繰り返し可能です。

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 inspectを使用しています。これはよく使う方法がわかりませんが、コンソールにエラーは表示されません。

出典

2017-06-23 Tony Sherman