为什么Bootstrap5 Carousel在Promise完成后动态生成无法正常工作？

• Bootstrap 5 的内置组件自动初始化逻辑只会在页面 DOMContentLoaded 事件触发时执行一次，仅扫描当时页面中已经存在的、带 data-bs-* 属性的元素并创建对应组件实例。
• 不加 await delay() 时，insertCarousel 是同步执行的，此时页面还未完成加载、DOMContentLoaded 事件尚未触发，插入的轮播 DOM 会被 Bootstrap 的自动初始化逻辑扫描到，因此可以正常工作。
• 加上 await delay() 后，1秒的延迟已经超过了页面加载完成的时间，DOMContentLoaded 事件已经执行完毕，此时动态插入的轮播 DOM 没有被 Bootstrap 识别初始化，自然只有静态结构，无法切换轮播。

只需要在动态插入轮播 DOM 后，手动初始化轮播组件即可，修改 insertCarousel 函数：

function insertCarousel() {
  let carousel = `<!-- 原有轮播HTML代码保持不变 -->`;
  document.querySelector('.carousel-wrapper').insertAdjacentHTML('beforeend', carousel);
  // 新增：手动初始化刚插入的轮播组件
  const carouselElement = document.getElementById('carouselExampleIndicators');
  new bootstrap.Carousel(carouselElement, {
    ride: 'carousel' // 和原有 data-bs-ride 配置保持一致
  });
}

如果是用 ESM 模块化方式引入 Bootstrap，提前导入 Carousel 类再初始化即可，逻辑完全一致。

• 所有 Bootstrap 5 的动态插入组件都需要遵循这个逻辑：动态插入后手动初始化，不能依赖默认的自动扫描。
• 如果页面中可能多次插入轮播，注意给每个轮播分配唯一的 ID，避免初始化冲突。
• 你当前代码里的轮播图片标签重复声明了 class 属性，浏览器只会识别第一个 class='tempimg'，导致 d-block w-100 的样式不生效，建议合并为 class='tempimg d-block w-100'。

内容的提问来源于stack exchange，提问作者Lukáš Ježek