引导工具提示不适用于使用 Ajax 加载的 HTML答案

【问题标题】：Bootstrap tooltip not working on HTML loaded using Ajax引导工具提示不适用于使用 Ajax 加载的 HTML
【发布时间】：2017-05-23 03:00:59
【问题描述】：

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

我的 ajax 调用将所有代码插入到“tooltiptest517”div 中。它还与 html 调用一起动态插入 jquery。我正在尝试使用它，以便当我将鼠标悬停在输入上时会弹出一个工具提示。

<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 调用后初始化工具提示
我这样做了，但也没有用。我将整个工具提示代码放在成功代码的上面脚本标记中，但它仍然不起作用。事实上，当我这样做时它没有识别 $('#blank1') 所以我创建了 $('body').on('click', '#blank1', function() {});并将工具提示代码放在那里，但这也不起作用。
在tooltip函数中传递“title”、“placement”、“html”、“template”等作为参数调用tooltip代码有问题吗？
我对此表示怀疑。它似乎工作正常jsfiddle.net/sg3u0c3c
jsfiddle 没有通过 AJAX 拉取输入标签。它在不涉及 ajax 调用时工作。但是一旦你使用 AJAX 将 jquery 脚本和 html 输入标记都添加到文件中，它就不起作用了。

标签： javascript jquery angularjs ajax twitter-bootstrap

【解决方案1】：

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

【讨论】：