UpdatePanel内Bootstrap Tooltip触发回发后背景色丢失问题求解

问题根因 #

ASP.NET UpdatePanel 异步回发后会替换 ContentTemplate 内的全部DOM节点，页面初次加载时在$(document).ready中绑定的tooltip初始化逻辑仅对首次加载的DOM生效，回发后新渲染的带tooltip属性的元素未重新初始化，同时残留的旧tooltip实例会和新元素产生冲突，就会出现黑色背景丢失等样式异常问题。

解决方案 #

不需要修改UpdatePanel或单个控件的配置，只需要调整前端JS逻辑，将tooltip初始化逻辑抽为公共方法，同时绑定「页面初次加载」和「UpdatePanel异步回发完成」两个触发时机即可，修改后的代码如下：

<script>
// 公共tooltip初始化方法
function initTooltips() {
    // 先销毁已存在的tooltip实例，避免重复绑定冲突
    $('[data-toggle="tooltip"]').tooltip('dispose');
    // 重新初始化tooltip，默认保留Bootstrap黑底白字样式，有自定义配置也可以统一在这里添加
    $('[data-toggle="tooltip"]').tooltip();
}

// 页面首次加载时初始化
$(document).ready(function () {
    initTooltips();
});

// 监听UpdatePanel异步回发完成事件，回发后重新初始化tooltip
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
    initTooltips();
});
</script>

原来的UpdatePanel和内部控件代码不需要做任何修改，直接替换原有JS逻辑即可生效。

提示：如果使用的是Bootstrap 3版本，将销毁实例的代码改为$('[data-toggle="tooltip"]').tooltip('destroy')即可。

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