Bootstrap 5的Tooltips与Slider在jQuery .load()加载内容后失效如何解决

问题根因 #

Bootstrap 5的Tooltips、Slider等交互组件，仅会在页面首次加载完成时，对当前已存在的DOM元素执行一次初始化绑定。通过load()异步加载的新DOM元素并未被纳入初始化范围，因此相关交互失效。之前初始化未生效大概率是初始化范围错误、调用时机不对、或者组件初始化方法不符合Bootstrap 5的规范。

修复方案 #

修改后的完整代码如下，新增了组件初始化逻辑和滚动加载防抖逻辑：

var z = 6;
// 新增加载锁，防止滚动多次触发重复请求
var isLoading = false;

// 封装通用Bootstrap组件初始化方法，支持指定初始化的DOM范围
function initBootstrapComponents(parentEl = document) {
    // 初始化Tooltips
    const tooltipTriggerList = parentEl.querySelectorAll('[data-bs-toggle="tooltip"]');
    [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
    
    // 初始化Slider（如果使用的是第三方Slider插件，替换为对应组件的初始化逻辑即可）
    const sliderList = parentEl.querySelectorAll('.form-range');
    // 若使用bootstrap-slider第三方插件，替换为下方代码
    // [...sliderList].map(sliderEl => new bootstrap.Slider(sliderEl));
}

// 页面首次加载时初始化原有元素
window.addEventListener('load', () => {
    initBootstrapComponents();
});

$(window).scroll(function() {
    if(isLoading) return;
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        isLoading = true;
        const loadContainer = $("#resultload"+z)[0];
        $("#resultload"+z).load( "load.php?ca=<?php echo $kategorie; ?>&pl=<?php echo $ort; ?>&co=<?php echo $land; ?>&fi=<?php echo $filter; ?>&z="+z, function(response, status, xhr) {
            if (response == "") { 
                document.getElementById("loadz").style.display = "none"; 
                document.getElementById("loadzm").style.display = "block";
            } else {
                document.getElementById("loadz").style.display = "block"; 
                // 仅对刚加载完成的新容器内元素执行初始化，不影响原有已生效的元素
                initBootstrapComponents(loadContainer);
                z = z+6;
            }
            isLoading = false;
        }); 
    }
});

注意事项 #

• 限定初始化范围为新加载的容器，不要全局执行初始化，避免重复绑定已有元素导致交互异常
• 新增的isLoading锁可以避免滚动到底部时多次触发同一页的加载请求，减少不必要的接口调用

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