Qtip2在fnDrawCallback中重复显示问题（JavaScript与MVC.Net 4）

这个问题我之前碰到过好几次，核心原因其实很明确：你重新绘制表格时，旧的Qtip实例没有被彻底清理，新的tooltip又绑定在了同一个元素上，导致新旧两个提示框叠加显示。下面是具体的解决步骤，亲测有效：

1. 绑定新Qtip前先销毁旧实例 #

每次AJAX更新表格完成后，在给元素绑定新Qtip之前，一定要先把目标元素上已存在的Qtip实例彻底销毁。Qtip2自带了destroy方法可以干这个事：

// 假设你的表格行或需要绑定tooltip的元素选择器是 .table-cell
$('.table-cell').qtip('destroy', true); // 参数true表示完全移除相关事件和DOM元素，不留痕迹

2. 只给新渲染的元素绑定Qtip #

不要在全局范围内重复绑定，而是在AJAX的成功回调里，针对刚生成的新表格元素进行绑定。举个完整的示例：

$.ajax({
    url: '/YourController/UpdateTableData',
    type: 'POST',
    data: { /* 你的更新参数 */ },
    success: function(htmlResult) {
        // 用返回的新HTML替换旧表格内容
        $('#target-table').html(htmlResult);
        
        // 先销毁所有旧的Qtip实例
        $('.table-cell').qtip('destroy', true);
        
        // 给新渲染的元素绑定Qtip
        $('.table-cell').qtip({
            content: {
                ajax: {
                    url: '/YourController/GetTooltipContent',
                    type: 'GET',
                    data: function() {
                        return { rowId: $(this).data('row-id') }; // 传递行ID获取对应数据
                    }
                }
            },
            // 其他Qtip配置项，比如位置、样式等
            position: {
                my: 'bottom left',
                at: 'top right'
            }
        });
    }
});

3. 可选：用事件委托避免重复绑定（进阶方案） #

如果你的表格元素是频繁动态生成的，也可以用事件委托的方式，只绑定一次逻辑，自动处理新元素。不过要注意检查元素是否已经绑定过Qtip，避免重复创建：

// 只在document上绑定一次事件委托
$(document).on('mouseenter', '.table-cell', function() {
    const $this = $(this);
    // 检查当前元素是否已经有Qtip实例，没有才创建
    if (!$this.data('qtip')) {
        $this.qtip({
            content: {
                ajax: { /* 你的AJAX配置 */ }
            },
            show: { event: 'mouseenter' },
            hide: { event: 'mouseleave' }
        });
        // 手动触发一次显示，确保即时生效
        $this.qtip('show');
    }
});

额外注意事项 #

• 确保AJAX更新表格时是完全替换旧内容，而不是追加，避免旧的表格元素残留在DOM里导致重复绑定。
• 如果你的页面里还有其他针对表格元素的事件绑定，也要检查是否存在重复绑定的情况，避免干扰Qtip的逻辑。

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