Bootstrap 工具提示不适用于动态生成的元素

Question

动态生成元素代码：

var rStatus = $("#statusText").val();
var roleID = $('#' + Globals.divUserRoleID).html().trim();
var nodelen = response.tsuites.length;
$("#TestSuiteSideMenu").empty();

for(var ts=0;ts<nodelen;ts++){
  var testSuiteName = response.tsuites[ts];
  var testNum = response.tnames[testSuiteName].length;
 var tsMenu =   "<li class='treeview' id='suitemenu'>"+
             "<a href='#' ><i class='fa fa-cubes'></i><span value="+testSuiteName+" id=edit-"+testSuiteName+">"+testSuiteName+"</span><i class='fa fa-angle-left pull-right'></i></a>"+"<ul class='treeview-menu' id="+testSuiteName+">"+
    "<li class='suite-options'>"+
                     "<p align='center'>"+
                        "<button type='button' id='btnSuiteRun-"+testSuiteName+"' class='btn test-btns btn-xs runsuite' data-toggle='tooltip' title='Run Suite'><img src='/assets/images/play_win_icon.svg' class='playwin'></button>"+
                        "<button type='button' id='btnSuiteEdit-"+testSuiteName+"' class='btn test-btns btn-xs editsuite' data-toggle='tooltip' title='Rename Suite'><i class='fa fa-pencil'></i></button>"+
                        "<button type='button' id='btnSuiteImport-"+testSuiteName+"' class='btn test-btns btn-xs importTest' name='"+testSuiteName+"' data-toggle='tooltip' title='Import Test' onclick='loadSuites(this.name)'><i class='fa fa-download'></i></button>"+
      //"<button type='button' id='btnSuiteLog-"+testSuiteName+"' class='btn test-btns btn-xs suitelog' data-toggle='tooltip' title='Suite Log'><i class='fa fa-file-text'></i></button>"+
      "<button type='button' id='btnSuiteClone-"+testSuiteName+"' class='btn test-btns btn-xs clonesuite' data-toggle='tooltip' title='Clone Suite'><i class='fa fa-clone'></i></button>"+
                        "<button type='button' id='btnSuiteDelete-"+testSuiteName+"' class='btn test-btns btn-xs deletesuite' data-toggle='tooltip' title='Delete Suite'><i class='fa fa-trash'></i></button>"+
                        "</p>"+"</li>"+"</ul></li>";
}

$("#TestSuiteSideMenu").append(tsMenu);  
$("[data-toggle='tooltip']").tooltip();

以下代码是动态生成的：

<ul class="treeview-menu menu-open" id="htrbg" style="display: block;">
   <li class="suite-options">
      <p align="center">
      <button type="button" id="btnSuiteEdit-htrbg" class="btn test-btns btn-xs editsuite" data-toggle="tooltip" title="Rename Suite"><i class="fa fa-pencil"></i></button>
      <button type="button" id="btnSuiteImport-htrbg" class="btn test-btns btn-xs importTest" name="htrbg" data-toggle="tooltip" title="Import Test" onclick="loadSuites(this.name)"><i class="fa fa-download"></i></button>
      <button type="button" id="btnSuiteClone-htrbg" class="btn test-btns btn-xs clonesuite" data-toggle="tooltip" title="Clone Suite"><i class="fa fa-clone"></i></button>
      <button type="button" id="btnSuiteDelete-htrbg" class="btn test-btns btn-xs deletesuite" data-toggle="tooltip" title="Delete Suite"><i class="fa fa-trash"></i></button>
      </p>
   </li>
</ul>

当我将鼠标悬停在按钮上时，它会将按钮的标题属性设为空白，并添加值为 'ui-id-2' 的属性 aria-describedby。但是我看不到工具提示。有人可以帮帮我吗？我也禁用了 jquery ui 工具提示，但它仍然不起作用。

Answer 1

您需要将 .tooltip() 添加到新创建的元素，因为它们没有绑定悬停事件的动作。您使用 $("[data-toggle='tooltip']").tooltip(); 时，它应用于现有的 [data-toggle='tooltip'] 元素，而不是未来的元素。

Answer 2

您必须在新添加的元素上实例化 tooltip()...

但仅限于他们！重新运行已经有工具提示的 init 并不是一个好主意...

所以我建议您在追加过程中使用 class，例如 nottooltipped（特别是如果您有很多）...这将使您能够查找这些元素并提供工具提示。

见下文：

$(document).ready(function(){
  $("[data-toggle='tooltip']").tooltip();

  // After 5 seconds... Simulating a dynamic append to add some buttons
  setTimeout(function(){
    $(".suite-options p").append('<button type="button" id="btnSuiteImport-htrbg" class="btn test-btns btn-xs importTest nottooltipped" name="htrbg" data-toggle="tooltip" title="I WAS ADDED !" onclick="loadSuites(this.name)"><i class="fa fa-surprise"></i></button>');
    
    // HERE! lookup the freshly appended elements to tooltip
    $(".nottooltipped").removeClass("nottooltipped").tooltip();
  },5000);
  
  
});

.suite-options{
  list-style:none;
}
.fa-surprise{
  color:red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<ul class="treeview-menu menu-open" id="htrbg" style="display: block;">
  <li class="suite-options">
    <p align="center">
      <button type="button" id="btnSuiteEdit-htrbg" class="btn test-btns btn-xs editsuite" data-toggle="tooltip" title="Rename Suite"><i class="fa fa-pencil-alt"></i></button>
      <button type="button" id="btnSuiteImport-htrbg" class="btn test-btns btn-xs importTest" name="htrbg" data-toggle="tooltip" title="Import Test" onclick="loadSuites(this.name)"><i class="fa fa-download"></i></button>
      <button type="button" id="btnSuiteClone-htrbg" class="btn test-btns btn-xs clonesuite" data-toggle="tooltip" title="Clone Suite"><i class="fa fa-clone"></i></button>
      <button type="button" id="btnSuiteDelete-htrbg" class="btn test-btns btn-xs deletesuite" data-toggle="tooltip" title="Delete Suite"><i class="fa fa-trash"></i></button>
    </p>
  </li>
</ul>

Bootstrap 工具提示不适用于动态生成的元素

Bootstrap tooltip doesn't work on dynamically generated elements

html

javascript

jquery

tooltip

twitter-bootstrap