在使用 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 属性，可以有效地解决 Jinja2 循环中删除模态框始终指向第一个元素的问题。 这种方法适用于需要在循环中生成多个独立模态框的场景，例如列表展示、表格编辑等。 动态生成ID是解决此类问题的关键，也是Web开发中常用的技巧。
以上就是解决 Jinja2 循环中删除模态框始终指向第一个元素的问题的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
899
