Jinja结合Materialize折叠组件渲染失效问题求助

你遇到的问题核心是Materialize组件的初始化时机和动态DOM元素的冲突：

Materialize的Collapsible折叠组件默认是在页面初始加载完成时（也就是$(document).ready()触发时）完成初始化绑定的。但你用Jinja的for循环渲染的<li>元素，是在页面模板渲染阶段才被动态插入到DOM中的——这时候组件初始化的脚本已经执行过了，新生成的折叠项并没有被绑定上折叠事件，所以点击完全没反应。

只需要调整组件的初始化时机，确保在所有动态DOM元素渲染完成后，再手动触发Collapsible的初始化即可，有两种简单可行的方式：

方法1：在页面底部添加初始化脚本（推荐） #

在你的base.html文件末尾（所有DOM元素和第三方脚本加载完成之后），添加以下初始化代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script>
  // 确保DOM完全渲染完毕后再初始化折叠组件
  $(document).ready(function(){
    $('.collapsible').collapsible();
  });
</script>

这样当Jinja循环渲染完所有食谱的折叠项后，初始化脚本会找到页面上所有.collapsible元素，为它们绑定折叠功能。

方法2：针对动态内容的延迟初始化 #

如果你的页面还有其他动态加载内容（比如AJAX请求），可以用window.load事件确保所有资源和DOM都加载完成后再初始化：

<script>
  $(window).on('load', function(){
    $('.collapsible').collapsible();
  });
</script>

1. 打开浏览器控制台（F12），检查是否有jQuery或Materialize脚本加载失败的报错；
2. 确认你的折叠项结构完全符合Materialize要求：每个<li>内必须包含.collapsible-header和.collapsible-body（你的代码结构是正确的）；
3. 检查类名拼写：确保是collapsible而不是其他拼写错误。

内容的提问来源于stack exchange，提问作者CoderGuider