JQuery UI 即使我们动态删除标题后工具提示仍然显示

Question

我有一个 table 单元格动态 adds/removes background-color 和点击标题。我正在使用 Jquery UI 工具提示来显示工具提示。但即使我们更新元素并删除标题，它也会继续显示工具提示。

[ 这是一个演示问题的 JSfiddle： https://jsfiddle.net/uz34vwf5/8/ - 如果您单击一个单元格 - 它会突出显示它并在两个 table 中添加一个标题。现在，如果将鼠标移到它们上面，您可以在第一个 table 中看到基本的替代文本，在第二个中看到样式化的工具提示。

现在再次单击它们以删除标题。在第一个 table 中，您可以看到它不再显示替代文本。但是在第二个中，它一直显示带有旧标题的工具提示。 ]

我试过使用：

$(this).tooltip('disable');

..但它不起作用。

Answer 1

试试这个演示：https://jsfiddle.net/uz34vwf5/9/

不是在整个 table #table2 上初始化工具提示，而是在每个 td 上初始化。 并且还使用 tooltip('destroy')，您将不会再看到旧的工具提示。

像这样；

$('td').click(function() {
    if ($(this).hasClass("clicked")) {
        $(this).removeClass("clicked");
        $(this).attr("title", "");
        $(this).tooltip('destroy');

    } else {
        $(this).addClass("clicked");
        $(this).attr("title", "Whatever");
        $(this).tooltip();
    }
});
//$('#table2').tooltip();