Javascript 引导工具提示未连接到单击的按钮

需要在页面上设置一系列图标，以便在单击时切换其行为。每个动作图标都有一个工具提示，反映在两种状态下要执行的动作

下面是一个动作图标的示例

    <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();

});

函数setNoQuote（_this）{
var按钮=$（_this）；
button.children（）.attr（'class'，'glyphicon-glyphicon-plus'）；
button.children（）.css（'color'，'#00ff00'）；
attr（'onclick'，'setDoQuote（this）'）；
按钮。工具提示（“销毁”）；
//attr（'data-original-title'，'Undo No Quote'）；
attr（'title'，'Undo No Quote'）；
setTips（）；
}
函数setDoQuote（_this）{
var按钮=$（_this）；
button.children（）.attr（'class'，'glyphicon-glyphicon-remove'）；
button.children（）.css（'color'，'#ff0000'）；
button.attr（'onclick'，'setNoQuote（this）'）；
按钮。工具提示（“销毁”）；
//attr（'data-original-title'，'No Quote this line'）；
attr（'title'，'No Quote this line'）；
setTips（）；
}
函数setTips（）{
$（'[rel=“tooltip”]'）。工具提示（{html:true}）；
}
$（窗口）。加载（函数（）{
setTips（）；
});

我看到的问题是，当图标改变，之前的工具提示被破坏时，

setTips（）调用未成功将新工具提示添加到单击的图标。这似乎是一个时间问题或其他问题，因为在事件完成后手动调用
setTips（）
，工作正常

下面是一个完整的HTML示例页面，演示了这个问题


同样值得注意的是，快速连续单击将给出不同的结果

请帮助我了解发生了什么以及原因。我应该使用什么最佳实践来避免此类问题？
替换此：

 setTips();

与：

如果仍不起作用，则添加两行

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

替换此项：

 setTips();

与：

如果仍不起作用，则添加两行

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

好吧，尽管我没有真正理解为什么原始代码没有像预期的那样工作，但我已经提出了一个似乎工作得很好的解决方案

通过将重新设置工具提示的操作从原始按钮单击事件线程中分离出来，一切似乎都正常工作。因此，诀窍是将
setTips（）
函数调用包装在计时器回调函数中

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

进一步说，我猜在更复杂的情况下，或者如果决定使用延迟是不可取的，我打赌我可以触发另一个异步事件来触发
setTips（）
行为，这可能也可以正常工作。但我不打算在这一点上测试它，因为延迟对于我的目的来说已经足够好了

我只是希望我知道为什么在对象上的事件上下文中调用
.tooltip（）
会阻止它正确设置该对象上的工具提示。
好吧，尽管我没有真正理解原始代码为什么没有按预期工作，但我已经找到了一个似乎工作正常的解决方案

通过将重新设置工具提示的操作从原始按钮单击事件线程中分离出来，一切似乎都正常工作。因此，诀窍是将
setTips（）
函数调用包装在计时器回调函数中

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

进一步说，我猜在更复杂的情况下，或者如果决定使用延迟是不可取的，我打赌我可以触发另一个异步事件来触发
setTips（）
行为，这可能也可以正常工作。但我不打算在这一点上测试它，因为延迟对于我的目的来说已经足够好了

我只是希望我知道为什么在对象上的事件上下文中调用
.tooltip（）
会阻止它正确设置该对象上的工具提示。
这是一个很好的建议，并且尝试了一些东西，证明了问题的另一个奇怪之处。尝试演示站点，点击其中一个x，你会看到它发生了变化，然后刷新新的工具提示，然后删除提示。我对这种行为感到困惑。我想这可能是因为：button.attr（'onclick'，'setDoQuote（this），我不确定，但只是当它作为handlerGood建议添加时，可能正在执行该函数，并且尝试了一些东西，证明了问题的另一个奇怪之处。尝试演示站点，点击其中一个x，你会看到它发生了变化，然后刷新新的工具提示，然后删除提示。我对这种行为感到困惑。我想这可能是因为：button.attr（'onclick'，'setDoQuote（this），我不确定，但只是可能该函数在作为handlerDuplicate添加时正在执行：“单击时重新加载工具提示”这个问题不是关于如何重新加载到工具提示。如果您阅读了我的回答，您会发现问题与调用工具提示刷新的事件线程有关。重复：“单击时重新加载工具提示”此问题与如何重新加载到工具提示无关。如果您阅读我的答案，您将看到问题与调用工具提示刷新的事件线程有关。