Всплывающая подсказка начальной загрузки не работает с динамически генерируемыми элементами

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>

При наведении курсора на кнопку атрибут заголовка кнопки становится пустым и добавляется атрибут, описываемый aria, со значениями как 'ui-id-2'. Но я не вижу подсказку. Может кто-нибудь, пожалуйста, помогите мне? Я также отключил всплывающие подсказки jquery ui, но они все еще не работают.

Answer 1

Вы должны создать экземпляр 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>

Answer 2

Вам необходимо добавить .tooltip() к вновь созданным элементам, потому что они не имеют привязки к действию при событии наведения мыши. Когда вы используете $("[data-toggle='tooltip']").tooltip();, он применяется к существующим [data-toggle='tooltip'] элементам, а не к будущим.