当我使用jQuery附加工具提示元素时，Bootstrap工具提示不起作用

Question

你们好，我有一个问题，如果有人可以帮助我，我将不胜感激。

目前，我正在使用一些引导程序功能，例如下面的代码。 我正在使用引导程序版本3

<div class="col-lg-12 col-md-12 col-xs-12  div_challenger" style="background-color: #somecolor; color:someTextColor;"
    data-toggle="tooltip" data-placement="right" title="some text here!!!">
    <span class="some icon"></span>
    <b>some title</b>
    <input type="hidden" value="somevalue" name="inputChallengerSelected">
</div>

此代码在html文件中效果很好。 但是当我使用Jquery append元素时，它的工作方式不同

使用jquery追加的代码。

<button id="someid" onclick="addElement()"> ADD element </button>
<div id="addhere"> </div>

脚本标签

<script>
function addElement(){
   let ElementToAdd = `    <div class="col-lg-12 col-md-12 col-xs-12  div_challenger" style="background-color: #somecolor; color:someTextColor;"
    data-toggle="tooltip" data-placement="right" title="some text here!!!">
    <span class="some icon"></span>
    <b>some title</b>
    <input type="hidden" value="somevalue" name="inputChallengerSelected">
</div>`
 $('#addhere').append(ElementToAdd)
}

如果有人告诉我为什么会这样，我将不胜感激

Answer 1

一个简单的答案是Bootstrap = CSS + JS。 尝试隐藏元素onload以及需要显示时。

Answer 2

看一下这个： 如何在动态元素上绑定引导工具提示

为了使动态注入的工具提示起作用，您必须使用元素来初始化工具提示插件，该元素在页面加载后已经存在，例如body。 然后它应该工作。