引导工具提示在使用 Ajax 加载的 HTML 上不起作用



我在输入上调用Bootstrap的工具提示函数。 通过 ajax 加载的 HTML 代码。但是我无法加载工具提示。

我的 ajax 调用插入了"tooltiptest517"div 中的所有代码。 它还动态插入 jquery 以及 html 调用。 我正在尝试使用它,以便当我将鼠标悬停在输入上时会弹出工具提示。

<h3 style="margin-bottom:30px;">
 <div id="tooltiptest578">
  Write the decimal as a fraction.  Give your answer in simplest form.
  <br>
  <br>
  0.78 = 
  <input data-toggle="popover" data-html="true" data-content="" data-placement="top" trigger="hover" autocomplete="off" type="text" id="blank1" class="blank1" size="5" name="answer1">
  <span id="first-input-span" data-toggle="popover" data-placement="right" data-html="true" data-content="<h4>Now you're all set to go!  Happy learning!</h4>"></span>
  <br>
  <script>$('#tooltiptest578 #blank1').tooltip({ template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner" style="max-width:250px;width:250px; background-color: #EFFAEA;color:black;opacity:1;border: 1px solid #5BBC2E;"></div></div>', placement: 'bottom', html: true, title : 'If your answer is a fraction, use /.<br/>For example: <i>3/4</i> or <i>-3/4</i><br/> For a mixed number, write <i>8 3/4</i> or <i>-8 3/4.</i>'});</script>
  <br>
 </div>                         
</h3>

当我不进行 ajax 调用时,这有效,但在有 ajax 调用时不起作用。 整个网络应用程序都在使用角度,但我认为这没有什么区别。 我尝试将工具提示调用包装在ajaxComplete,function((和documentReady包装器中,但这也不起作用。 这里的任何帮助都是巨大的,谢谢!

$.ajax({  
      type: "POST",  
       url: "example.php",  
       data:{  
       cache: false,  
       success: function(data){  
           $("#tableData").html(data);  
           $("[data-toggle=popover]").popover();  
        }  
      });  
 }  

最新更新