使用Ajax重载HTML内容时Bootstrap Tooltip卡顿的原因

核心原因 #

每次调用load.php里的Tooltip初始化代码时，会重复为页面上已存在的元素（比如导航栏的刷新按钮）创建新的Bootstrap Tooltip实例。同一个按钮被绑定多个Tooltip实例后，触发时多个实例同时响应，就会出现卡顿、闪烁甚至功能异常的情况。

解决办法 #

• 拆分初始化范围：
  主页面index.php里只初始化页面原有元素（比如导航栏刷新按钮）的Tooltip，代码放在页面加载完成的回调中：

  $(document).ready(function() {
    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
  });
  

  load.php里只针对新加载的内容初始化Tooltip，限定选择范围到加载内容的容器内：

  // 假设新内容插入到id为"content-container"的容器中
  const container = document.getElementById('content-container');
  if (container) {
    const tooltipTriggerList = container.querySelectorAll('[data-bs-toggle="tooltip"]')
    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
  }
  

• 初始化前销毁旧实例：
  如果没法拆分初始化范围，可以在创建新实例前，先销毁元素上已存在的Tooltip实例，避免重复绑定：

  // 先清理旧实例
  document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
    const existingTooltip = bootstrap.Tooltip.getInstance(el);
    if (existingTooltip) {
      existingTooltip.dispose();
    }
  });
  // 再创建新实例
  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
  const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
  

• 利用jQuery load回调优化：
  要是用jQuery的load()方法加载内容，直接在加载完成的回调里初始化新内容的Tooltip，精准度更高：

  $('#content-container').load('load.php', function() {
    $(this).find('[data-bs-toggle="tooltip"]').each(function() {
      new bootstrap.Tooltip(this);
    });
  });
  

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