Django项目中HTMX动态加载的Flowbite组件无法正常工作

你的猜测完全正确：Flowbite默认仅在页面首次加载时扫描并初始化组件，动态注入的HTML里的组件不会自动被识别。要解决这个问题，核心是在HTMX完成内容注入后，手动触发Flowbite的组件初始化。

解决方案步骤 #

1. 利用HTMX的htmx:afterSwap事件 #

HTMX会在内容成功替换到目标元素后触发htmx:afterSwap事件，我们可以监听这个事件，对新加载的内容重新初始化Flowbite组件。

2. 手动初始化Flowbite组件 #

根据Flowbite的版本，有两种初始化方式：

方式一：针对单个组件类型初始化（性能更优）

如果只需要初始化下拉菜单，直接调用Flowbite的initDropdowns方法，并传入新加载的内容容器作为目标：

document.addEventListener('htmx:afterSwap', function(event) {
  // 检查替换的目标是否是模态窗容器
  if (event.target.id === 'newItemModal') {
    // 初始化目标容器内的所有下拉菜单
    window.Flowbite.initDropdowns(event.target);
  }
});

方式二：全局重新初始化所有组件

如果动态内容包含多种Flowbite组件，可以调用全局初始化方法：

document.addEventListener('htmx:afterSwap', function(event) {
  if (event.target.id === 'newItemModal') {
    window.Flowbite.initFlowbite();
  }
});

3. 确保Flowbite JS的正确引入 #

要保证Flowbite JS能被全局访问到，比如在页面底部添加CDN引入：

<script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.js"></script>

如果是通过npm安装的，需在主JS文件中导入并挂载到全局：

import * as Flowbite from 'flowbite';
window.Flowbite = Flowbite;

验证效果 #

点击按钮加载模态窗内容后，下拉菜单应该能正常触发展开/收起操作。这种方法同样适用于其他动态加载的Flowbite组件（如提示框、标签页），只需对应调用initTooltips、initTabs等方法即可。

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