引導程序工具提示未附加到單擊的按鈕上

Question

需要在頁面上具有一系列圖標，以在單擊時切換其行為。 每個操作圖標都有一個工具提示，該提示反映了在兩種狀態下要采取的操作。

這是一個動作圖標的示例。

    <span name="no_quote_action" class="btn btn-xs btn-action " style="border: none"
          rel="tooltip" data-placement="right" data-trigger="hover"
          title="No-Quote this line" onclick="setNoQuote(this)">
          <span class="glyphicon glyphicon-remove" style="color: #ff0000"></span>
    </span>

在頁面上有一個腳本標記，概述了兩個操作。

<script>
function setNoQuote(_this) {
    var button = $(_this);
    button.children().attr('class', 'glyphicon glyphicon-plus');
    button.children().css('color', '#00ff00');
    button.attr('onclick', 'setDoQuote(this)');

    button.tooltip('destroy');
 //   button.attr('data-original-title', 'Undo No-Quote');
    button.attr('title', 'Undo No-Quote');
    setTips();
}

function setDoQuote(_this) {
    var button = $(_this);
    button.children().attr('class', 'glyphicon glyphicon-remove');
    button.children().css('color', '#ff0000');
    button.attr('onclick', 'setNoQuote(this)');
    button.tooltip('destroy');
  //  button.attr('data-original-title', 'No-Quote this line');
    button.attr('title', 'No-Quote this line');
    setTips();
}

function setTips() {
    $('[rel="tooltip"]').tooltip({html: true});
}

$(window).load(function () {

    setTips();

});

我看到的問題是，當圖標更改且先前的工具提示被破壞時， setTips(); 調用未成功將新的工具提示添加到單擊的圖標。 這似乎是時間問題，因為在事件完成后手動調用setTips()可以按預期工作。

以下是一個完整的HTML示例頁面，它演示了該問題。

http://blake.bitlagoon.com

還要注意的是，快速連續單擊將產生不同的結果。

請幫助我了解發生了什么以及為什么。 我應該使用什么最佳實踐來避免此類問題？

Answer 1

替換為：

 setTips();

有：

button.tooltip({html: true});

如果仍然無法正常工作，則添加兩行

button.tooltip({html: true});
button.tooltip('show');

Answer 2

好吧，盡管不能真正理解為什么原始代碼無法按預期工作，但我還是提出了一個看起來效果很好的解決方案。

通過將重新設置工具提示的操作從原始按鈕單擊事件線程中分離出來，一切似乎都可以正常工作。 因此，訣竅是將setTips()函數調用包裝在計時器回調函數中。

setTimeout(function(){
        setTips();
    }, 300);

通過擴展，我猜測在更復雜的情況下，或者如果確定不希望使用延遲，我setTips()我可以觸發另一個異步事件來觸發setTips()行為，並且可能也可以正常工作。 但是我現在不會對此進行測試，因為延遲對於我的目的來說已經足夠好了。

我只是希望我知道為什么在對象上的事件上下文中調用.tooltip()阻止它在該對象上正確設置工具提示。