jQuery AJAX请求成功后scrollbar、tooltipster等插件失效如何解决？

开发者阿泽

2026-10-6

解决方案

首先核对类名拼写：你描述中给滚动容器绑定的类为.scrollbar-rails，但代码中选择器写的是.scrollbar-rail，二者不一致会导致未选中目标元素，直接造成初始化失效，先调整选择器和实际类名保持一致。
调整初始化执行顺序：动态插入的DOM需要完全挂载到页面后才能正确绑定插件，你现有代码缺失了将返回的data插入到页面容器的步骤，要先插入数据、再控制元素显隐、最后执行插件初始化。
避免重复初始化冲突：如果目标元素之前已经初始化过滚动条插件，重复调用scrollbar()会出现实例冲突，需要先调用销毁方法清除旧实例，再重新初始化。
tooltipster插件的问题和滚动条问题根因完全一致，同样在动态DOM插入完成后，选中目标元素执行初始化即可。

修正后的回调代码参考：

success: function(data) {
    // 先将接口返回数据插入到对应容器，确保DOM完成渲染
    $("#searchResults > div").html(data); // 此处可根据你实际的DOM插入逻辑调整
    // 控制显隐
    $("#searchResultsNoShow").hide();
    $("#searchResults").show();
    // 滚动条初始化：先判断元素存在、销毁旧实例、再初始化新实例
    const $scrollContainer = $('.scrollbar-rails');
    if ($scrollContainer.length) {
        $scrollContainer.scrollbar('destroy');
        $scrollContainer.scrollbar();
    }
    // 同步初始化tooltipster
    $('.your-tooltip-class').tooltipster(); // 替换为你实际绑定提示框的元素选择器
}