Question

如果有人能帮助我，我们有什么问题，我会感激不尽。

目前我正在使用一些引导程序功能，例如，下面的代码。我使用的是bootstrap第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追加元素时，这并没有以相同的方式工作

使用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以及何时需要show。

Answer 2

看看这个： How to bind bootstrap tooltip on dynamic elements

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

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

2 个答案: