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

在使用 Python Flask 框架结合 Jinja2 模板引擎开发 Web 应用时，经常需要在循环中生成模态框，例如在列表展示页面中为每个条目提供删除确认的模态框。然而，一个常见的问题是，点击任何条目的删除按钮，弹出的模态框始终指向列表中的第一个元素。这是因为所有条目的删除按钮都指向同一个模态框，而 Jinja2 循环并没有正确地为每个条目生成独立的模态框。

问题分析

问题的根源在于 HTML 中模态框的 ID 是固定的，导致所有删除按钮都触发同一个模态框。Jinja2 循环虽然在生成表格行，但是模态框的 HTML 代码块也在循环内部，但其 ID 却没有随循环变量而改变。因此，当点击任何一个删除按钮时，触发的都是页面上第一个模态框。

解决方案

解决此问题的关键在于为每个循环生成的模态框赋予唯一的 ID，并将删除按钮的 data-target 属性指向对应的 ID。具体步骤如下：

1. 动态生成模态框 ID：在 Jinja2 循环中，使用循环变量（例如文档的 _id）来动态生成模态框的 ID。

   
       
   
           
   
               
   
                   
   删除确认
                   
                       ×
                   
               
               
   
                   确认要删除 {{ doc["clientId"] }} (版本：{{ doc["version"] }}) 吗？
               
               
   
                   确认
                   取消
               
           
       
   

2. 修改删除按钮的 data-target 属性：将删除按钮的 data-target 属性设置为与模态框 ID 相对应的值。

   

   Manus

   全球首款通用型AI Agent，可以将你的想法转化为行动。

   下载

   
       @@##@@
   

3. 确保循环正确渲染：将上述代码片段放置在 Jinja2 的 for 循环内部，确保每个列表条目都生成一个独立的模态框。

   
       {% for doc in docs %}
       
           
           
               @@##@@
           
           
           
   
               
   
                   
   
                       
   
                           
   删除确认
                           
                               ×
                           
                       
                       
   
                           确认要删除 {{ doc["clientId"] }} (版本：{{ doc["version"] }}) 吗？
                       
                       
   
                           确认
                           取消
                       
                   
               
           
       
       {% endfor %}
   

示例代码

以下是一个完整的示例代码，展示了如何在 Jinja2 循环中正确生成删除模态框：

        {% for doc in docs %}
        

                

                    

                        

                            
删除确认
                            
                                ×
                            
                        
                        

                            确认要删除 {{ doc["clientId"] }} (版本：{{ doc["version"] }}) 吗？
                        
                        

                            确认
                            取消
                        
                    
                
            
        {% endfor %}
    

    

        

            
State
            
Name
            
Version
            
Description
            
Last Update
            
Delete
            
View
            
Clone
        
    
    

            

            
{{ doc["clientId"] }}
            
{{ doc["version"] }}
            
{{ doc["description"] }}
            
{{ doc["lastUpdate"] }}
            

                @@##@@
            
            
@@##@@
            
@@##@@

            
        

注意事项

• 确保模态框的 ID 在页面中是唯一的。
• data-target 属性的值必须与模态框的 ID 完全匹配。
• 如果使用了 JavaScript 代码来动态创建或修改模态框，需要确保 JavaScript 代码也能够正确处理动态生成的 ID。

总结

通过为每个循环生成的模态框赋予唯一的 ID，并正确设置删除按钮的 data-target 属性，可以有效地解决 Jinja2 循环中删除模态框始终指向第一个元素的问题。 这种方法适用于需要在循环中生成多个独立模态框的场景，例如列表展示、表格编辑等。 动态生成ID是解决此类问题的关键，也是Web开发中常用的技巧。