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> 

當我將鼠標懸停在按鈕上時，它將按鈕的title屬性設置為空白，並添加一個屬性aria-describedby，其值為'ui-id-2'。 但是我看不到工具提示。 有人可以幫幫我嗎？ 我也禁用了jQuery ui工具提示，但仍然無法正常工作。

Answer 1

您需要將.tooltip()添加到新創建的元素，因為它們沒有對懸停事件進行綁定的操作。 您使用$("[data-toggle='tooltip']").tooltip(); ，它將應用於現有的[data-toggle='tooltip']元素，而不是將來的元素。

Answer 2

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

但是只有他們！ 在已經提示的工具上重新運行init不是一個好主意...

因此，我建議您在附加過程中使用諸如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>