解决 Jinja2 循环中删除模态框始终指向第一个元素的问题

在使用 Jinja2 模板引擎开发 Web 应用时，我们经常会遇到需要在循环中为列表元素添加删除操作，并配合模态框确认删除的场景。很多开发者初次实现时会遇到一个典型问题：无论点击哪个元素的删除按钮，弹出的模态框始终是第一个元素的删除确认内容，这是因为没有正确区分不同元素对应的模态框标识导致的。

问题复现

假设我们有一个用户列表页面，需要展示所有用户信息，并且每个用户后面都有删除按钮，点击删除按钮弹出模态框确认是否删除该用户。常见的错误实现方式如下：

<!-- 循环渲染用户列表 -->
{% for user in user_list %}
<div class="user-item">
    <span>用户名：{{ user.name }}</span>
    <span>用户ID：{{ user.id }}</span>
    <!-- 错误写法：所有按钮都指向同一个模态框 -->
    <button type="button" data-toggle="modal" data-target="#deleteModal">删除</button>
</div>

<!-- 删除确认模态框 -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">确认删除</h5>
            </div>
            <div class="modal-body">
                确定要删除用户 {{ user.name }} 吗？
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal">取消</button>
                <button type="button" onclick="deleteUser({{ user.id }})">确认删除</button>
            </div>
        </div>
    </div>
</div>
{% endfor %}

上述代码的问题在于，Jinja2 循环结束后，模板中只会保留最后一个循环生成的<div class="modal fade" id="deleteModal">标签，或者所有按钮都指向同一个id的模态框，而模态框内的user.name和user.id只会取最后一次循环的值，因此不管点击哪个用户的删除按钮，弹出的都是最后一个用户的信息，或者始终指向第一个用户的错误数据。

解决方案：为元素和模态框添加唯一标识

要解决该问题，核心思路是为循环中的每个用户生成唯一的标识，让删除按钮和对应的模态框通过唯一标识关联，同时模态框内的内容也根据实际点击的用户动态渲染。

步骤1：生成唯一模态框ID

我们可以使用用户的唯一字段（比如用户ID）来拼接模态框的ID，保证每个用户对应的模态框ID都是唯一的。修改按钮的data-target属性和模态框的id属性如下：

{% for user in user_list %}
<div class="user-item">
    <span>用户名：{{ user.name }}</span>
    <span>用户ID：{{ user.id }}</span>
    <!-- 按钮指向对应用户ID的模态框 -->
    <button type="button" data-toggle="modal" data-target="#deleteModal{{ user.id }}">删除</button>
</div>

<!-- 对应用户ID的唯一模态框 -->
<div class="modal fade" id="deleteModal{{ user.id }}" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">确认删除</h5>
            </div>
            <div class="modal-body">
                确定要删除用户 {{ user.name }} 吗？
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal">取消</button>
                <button type="button" onclick="deleteUser({{ user.id }})">确认删除</button>
            </div>
        </div>
    </div>
</div>
{% endfor %}

这样每个用户的删除按钮都会指向自己ID对应的模态框，模态框内的user.name和user.id也会是对应循环中的当前用户数据，不会出现混淆。

步骤2：优化模态框渲染（避免重复生成）

如果列表数据量很大，上述方式会在页面中生成大量重复的模态框DOM节点，影响页面性能。我们可以换一种方式，只生成一个公共模态框，通过JavaScript动态修改模态框的内容：

<!-- 循环渲染用户列表 -->
{% for user in user_list %}
<div class="user-item">
    <span>用户名：{{ user.name }}</span>
    <span>用户ID：{{ user.id }}</span>
    <!-- 按钮携带用户信息，点击时触发自定义事件 -->
    <button type="button" class="delete-btn" data-user-id="{{ user.id }}" data-user-name="{{ user.name }}">删除</button>
</div>
{% endfor %}

<!-- 公共删除确认模态框 -->
<div class="modal fade" id="commonDeleteModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">确认删除</h5>
            </div>
            <div class="modal-body" id="modalBodyContent">
                <!-- 内容由JS动态填充 -->
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal">取消</button>
                <button type="button" id="confirmDeleteBtn">确认删除</button>
            </div>
        </div>
    </div>
</div>

对应的JavaScript代码如下：

// 给所有删除按钮绑定点击事件
document.querySelectorAll('.delete-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        // 获取当前按钮携带的用户信息
        const userId = this.getAttribute('data-user-id');
        const userName = this.getAttribute('data-user-name');
        // 填充模态框内容
        document.getElementById('modalBodyContent').innerText = `确定要删除用户 ${userName} 吗？`;
        // 给确认删除按钮绑定当前用户的删除事件
        document.getElementById('confirmDeleteBtn').onclick = function() {
            deleteUser(userId);
            // 关闭模态框
            $('#commonDeleteModal').modal('hide');
        };
        // 显示模态框
        $('#commonDeleteModal').modal('show');
    });
});

// 删除用户的函数
function deleteUser(userId) {
    // 这里写实际的删除请求逻辑，比如发送AJAX请求到 https://www.ipipp.com/api/deleteUser
    console.log(`删除用户ID：${userId}`);
}

方案对比

两种方案各有适用场景，我们可以通过下表对比选择：

注意事项

• 如果使用唯一ID模态框方案，要确保每个用户的唯一标识（比如用户ID）确实不重复，否则还是会出现模态框冲突的问题。

• 使用公共模态框动态渲染方案时，要注意事件绑定的时机，避免因事件未正确绑定导致点击无效。

• 实际开发中，删除操作建议通过POST请求完成，避免GET请求导致的误删除问题，接口地址可以参考 https://www.ipipp.com/api/deleteUser 的格式设计。

Jinja2 模态框 循环删除 唯一标识 DOM性能优化