局部重载<div>后Bootstrap tooltip失效，是刷新代码还是初始化问题？

问题根因 #

两个问题同时存在：

• tooltip初始化逻辑只在页面首次加载完成时执行了一次，当你通过load方法替换了#here区域的DOM元素后，新生成的.test类按钮没有绑定tooltip事件，自然不会触发提示
• 你注释的那种$("#here").load(" #here > *")写法是从当前页面抓取#here的子元素重新写入自身，多次执行后容易出现DOM嵌套异常、重复绑定的问题，频繁刷新还会因为请求响应顺序问题导致页面内容混乱

修复方案 #

1. 把tooltip初始化逻辑封装成独立函数，每次DOM刷新完成后重新调用
2. 在load方法的回调函数里执行初始化，调用前先销毁旧的tooltip实例避免内存泄漏
3. 可选优化：调整定时刷新逻辑，等上一次load请求完成后再触发下一次刷新，避免请求堆积

修改后的完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<script>
// 封装tooltip初始化函数
function initTooltip() {
    // 先销毁已存在的tooltip实例，避免重复绑定
    $('.test').tooltip('dispose');
    $('.test').tooltip({ title: "Text", trigger: "mDown", delay: { hide: 100 } });
}

$(document).ready(function () {
    // 页面首次加载先初始化一次
    initTooltip();
    // 定时刷新
    setInterval(function () {
        $('#here').load('test.html', function() {
            // load请求完成、DOM更新后，重新初始化tooltip
            initTooltip();
        });
    }, 3000);
});
</script>

<div style="margin:50px;">
    <div id="here">
        <button class="test">test</button>
    </div>
</div>

额外说明 #

如果你还是要用从当前页面重载#here的写法，改成如下形式避免DOM嵌套：

$("#here").load(location.href + " #here > *", function() {
    initTooltip();
});

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