在使用 Python Flask 框架结合 Jinja2 模板引擎开发 Web 应用时，经常需要在循环中生成模态框，例如在列表展示页面中为每个条目提供删除确认的模态框。然而，一个常见的问题是，点击任何条目的删除按钮，弹出的模态框始终指向列表中的第一个元素。这是因为所有条目的删除按钮都指向同一个模态框，而 Jinja2 循环并没有正确地为每个条目生成独立的模态框。
问题分析
问题的根源在于 HTML 中模态框的 ID 是固定的，导致所有删除按钮都触发同一个模态框。Jinja2 循环虽然在生成表格行，但是模态框的 HTML 代码块也在循环内部，但其 ID 却没有随循环变量而改变。因此，当点击任何一个删除按钮时，触发的都是页面上第一个模态框。
解决方案
解决此问题的关键在于为每个循环生成的模态框赋予唯一的 ID，并将删除按钮的 data-target 属性指向对应的 ID。具体步骤如下：
-
动态生成模态框 ID：在 Jinja2 循环中，使用循环变量（例如文档的 _id）来动态生成模态框的 ID。
<div class="modal fade" id="deleteModal_{{ doc['_id'] }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">删除确认</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> 确认要删除 {{ doc["clientId"] }} (版本：{{ doc["version"] }}) 吗？ </div> <div class="modal-footer"> <a href="./delete?_id={{ doc['_id'] }}"><button type="button" class="btn btn-danger">确认</button></a> <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button> </div> </div> </div> </div> -
修改删除按钮的 data-target 属性：将删除按钮的 data-target 属性设置为与模态框 ID 相对应的值。
<td class="text-center"> <img src="{{ url_for('static',filename='images/trash.png') }}" width="30" data-toggle="modal" data-target="#deleteModal_{{ doc['_id'] }}" /> </td> -
确保循环正确渲染：将上述代码片段放置在 Jinja2 的 for 循环内部，确保每个列表条目都生成一个独立的模态框。
<tbody> {% for doc in docs %} <tr> <!-- 其他单元格内容 --> <td class="text-center"> <img src="{{ url_for('static',filename='images/trash.png') }}" width="30" data-toggle="modal" data-target="#deleteModal_{{ doc['_id'] }}" /> </td> <!-- 模态框代码 --> <div class="modal fade" id="deleteModal_{{ doc['_id'] }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">删除确认</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> 确认要删除 {{ doc["clientId"] }} (版本：{{ doc["version"] }}) 吗？ </div> <div class="modal-footer"> <a href="./delete?_id={{ doc['_id'] }}"><button type="button" class="btn btn-danger">确认</button></a> <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button> </div> </div> </div> </div> </tr> {% endfor %} </tbody>
示例代码
以下是一个完整的示例代码，展示了如何在 Jinja2 循环中正确生成删除模态框：
<table class="table table-sm table-striped">
<thead class="text-center">
<tr>
<th>State</th>
<th>Name</th>
<th>Version</th>
<th>Description</th>
<th>Last Update</th>
<th>Delete</th>
<th>View</th>
<th>Clone</th>
</tr>
</thead>
<tbody>
{% for doc in docs %}
<tr>
<td class="text-center"><a href="./done?_id={{ doc['_id'] }}"><input type="image" src="static/images/recipe.png" width="30"></a></td>
<td class="text-center"><font size ="8"><em>{{ doc["clientId"] }}</em></font></td>
<td class="text-center"><strong>{{ doc["version"] }}</strong></td>
<td class="text-center"><strong>{{ doc["description"] }}</strong></td>
<td class="text-center"><strong>{{ doc["lastUpdate"] }}</strong></td>
<td class="text-center">
<img src="{{ url_for('static',filename='images/trash.png') }}" width="30" data-toggle="modal" data-target="#deleteModal_{{ doc['_id'] }}" />
</td>
<td class="text-center"><a href="./showRec?_id={{ doc['_id'] }}" target="_blank"><img src="{{ url_for('static',filename='images/view_n.png') }}" width="30" /></a></td>
<td class="text-center"><a href="./cloneRec?_id={{ doc['_id'] }}"><img src="{{ url_for('static',filename='images/edit.png') }}" width="30" /></a></td>
<div class="modal fade" id="deleteModal_{{ doc['_id'] }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">删除确认</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
确认要删除 {{ doc["clientId"] }} (版本：{{ doc["version"] }}) 吗？
</div>
<div class="modal-footer">
<a href="./delete?_id={{ doc['_id'] }}"><button type="button" class="btn btn-danger">确认</button></a>
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
</tr>
{% endfor %}
</tbody>
</table>注意事项
- 确保模态框的 ID 在页面中是唯一的。
- data-target 属性的值必须与模态框的 ID 完全匹配。
- 如果使用了 JavaScript 代码来动态创建或修改模态框，需要确保 JavaScript 代码也能够正确处理动态生成的 ID。
总结
通过为每个循环生成的模态框赋予唯一的 ID，并正确设置删除按钮的 data-target 属性，可以有效地解决 Jinja2 循环中删除模态框始终指向第一个元素的问题。 这种方法适用于需要在循环中生成多个独立模态框的场景，例如列表展示、表格编辑等。 动态生成ID是解决此类问题的关键，也是Web开发中常用的技巧。
