使用 Jquery 将 html 附加到 div - 将引导工具提示添加到附加项目

Question

我有一个 div：$(".results")。随着事情的发生，结果被添加到这个 div 中。其中之一是掷骰子，格式为<kdb>

例如：

function resultBox(result, color="red"){ return "<kbd class='"+color+"'>"+result+"</kbd>";

默认的 kdb 颜色是红色，但是我添加了很多颜色（不同的颜色用于不同的结果类型）。我想为每个 kdb 添加一个工具提示来解释颜色。

例如：

function resultBox(result, color="red"){
  return "<kbd class='"+color+"' data-toggle='tooltip' title='"+colorInfo(color)+"'>"+result+"</kbd>";
}

function colorInfo(color) {
  return "blah blah";
}

（我不需要有关 colorInfo() 函数的帮助）我只是无法弄清楚为什么引导工具提示无法正确显示。 （意思：我看到的是一个标准的工具提示，好像我没有添加Bootstrap。而不是看到带有小箭头的Bootstrap默认黑色工具提示）

回答前请注意

• 引导工具提示的格式正确。这已添加到我的主要 javascript 页面。 $('[data-toggle="tooltip"]').tooltip(); 我可以通过将引导工具提示用普通 HTML 写出来来正常使用它们。

我只是不确定在 Javascript 中动态创建它们时如何绑定它们

编辑：这不是重复的。这个问题已经回答了。 “可能重复”中没有找到答案

Answer 1

在 DIV 中追加内容后，您需要运行 $(#AddedItems).tooltip() 函数。

注意：这不起作用，因为此函数($('[data-toggle="tooltip"]').tooltip()) 仅适用于 dom 中可用的 dom 元素。