Bootstrap Toast的data-delay属性不生效：Ajax提交表单后Toast无法自动隐藏

问题根源 #

Bootstrap Toast的所有配置（包括自动隐藏的延迟时间）都是在组件初始化阶段从DOM属性读取的。你通过.load()方法动态插入的Toast节点没有经过初始化流程，节点上的data-delay属性不会被组件识别，自然不会触发自动隐藏的定时器逻辑。

修复操作步骤 #

• 先修正现有代码的语法bug：你当前编写的Ajax加载代码存在选择器语法错误，$('#messages)缺少闭合单引号，先补全为$('#messages')
• 利用.load()内置的完成回调，等动态内容完全插入DOM后，再对新的Toast节点执行初始化：

  $('#messages').load(location.href + " #messages>*", function() {
    // 筛选容器内所有未初始化的Toast节点
    const unInitToasts = document.querySelectorAll('#messages .toast:not([data-initialized])');
    unInitToasts.forEach(toastEl => {
      // 标记节点已初始化，避免重复绑定定时器导致逻辑异常
      toastEl.setAttribute('data-initialized', 'true');
      // 手动初始化Toast，此时组件会自动读取节点上的data-delay配置
      const bsToast = new bootstrap.Toast(toastEl);
      // 触发Toast展示
      bsToast.show();
    })
  })
  

补充说明 #

• 如果你使用的是Bootstrap 4版本，初始化代码替换为jQuery写法即可：$(toastEl).toast({delay: toastEl.dataset.delay})，核心逻辑完全一致
• 想要实现5秒自动消失的效果，直接把模板里Toast节点的data-delay属性值改成5000即可，不需要在JS里单独编写定时器，组件初始化时会自动读取该属性值配置自动隐藏的等待时长
• 给已初始化的节点加标记属性，是为了避免后续重复加载时把同一个Toast多次初始化，导致叠加多个定时器控制隐藏逻辑的异常问题

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