【发布时间】：2021-04-08 15:27:42
【问题描述】：
我是第 100 个提出类似问题的人，所以我确信这很简单。
第一次在 Chrome 中使用 boostrap / jinja。简单地说，按钮在那里，但点击它什么也没做。数据都从 Jinja 填充得很好，并且 jinja 正确渲染了 for 循环，目标调用和 div id 之间的 id 匹配。
**编辑：在遵循查看此 URL 的建议后：https://getbootstrap.com/docs/5.0/components/modal/#usage 并剪切和粘贴也不起作用的示例“现场演示”。可能是我缺少的环境因素？
<!DOCTYPE html>
<html lang="en">
<html>
<head>
</head>
<body>
{% block content %}
<table>
<tr>
<td>
{% for loc, content in variant.location.items() %}
{% set modal_id = day.header + item_name +variant.variant_name %}
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#{{modal_id}}">{{ loc }} : {{ content.quantity }}</button>
{% endfor %}
</td>
</tr>
</table>
{% endblock %}
</body>
{%block modals%}
{% for loc, content in variant.location.items() %}
{% set modal_id = day.header + item_name + variant.variant_name %}
<!-- Modal -->
<div id="{{ modal_id }}" class="modal fade" role="dialog" style="z-index: 10000000">
<div class="modal-dialog">
<div classs="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<p>STUFF</p>
</div>
</div>
</div>
</div>
{% endfor %}
{%endblock%}
</html>
【问题讨论】：
-
这可能与
id属性有关。它们在页面上必须是唯一的。特别是，Bootstrap 依赖于此。您的modal_id似乎不是唯一的 -day.header + item_name + variant.variant_name。我看不到这些变量是什么，但根据您的for循环，您可能希望id依赖于loc和/或content（目前不依赖）。 -
它现在实际上是独一无二的，但你是对的，将来可能会有重叠。但正如我所提到的，即使是双方的原始测试“id = test”，没有任何生成的 id，也不起作用。我似乎缺少一些更基本的东西。
-
您的 HTML 模板是否派生自
base.html？我在上面的模板中看不到引导 CSS 和 JS。它正在加载到任何地方吗？ -
@costaparas 不，它没有。它是 jinja 通过 Flask 渲染 index.html。没有 JS。就像我说的，这是我第一次广泛使用这个设置，我觉得在支持文档中我还没有找到一些东西。JS 直接在头脑中。这是实际生成的内容：imposing-fin-299523.wl.r.appspot.com
-
我的意思是您的 HTML 似乎根本没有加载 Bootstrap JS 和 CSS，所以我假设您可能是在
base.htmlJinja HTML 模板中加载它，这是标准做法在 Flask 中.. 无论如何，我在下面添加了一个答案，解释了您遇到的两个问题。