如何在 jquery 的引导弹出内容中放置一个字形图标答案

【问题标题】：How to put a glyphicon inside the bootstrap popover content in jquery如何在 jquery 的引导弹出内容中放置一个字形图标
【发布时间】：2017-12-28 18:01:54
【问题描述】：

我想在弹出框的内容旁边包含一个字形图标，它将在 jquery 中动态完成。但是当我为 glyphicon 添加 span 标签时，它会在显示弹出框时显示 html 字符串。它不会将其转换为 html

$(this).attr("data-content", "<span class=\"glyphicon glyphicon-warning-sign\" aria-hidden=\"true\"></span>You can't unlist if you have upcoming events scheduled" );

内容最终在弹出窗口中看起来像这样

"<span class=\"glyphicon glyphicon-warning-sign\" aria-hidden=\"true\"></span>You can't unlist if you have upcoming events scheduled"

【问题讨论】：

标签： jquery html css twitter-bootstrap glyphicons

【解决方案1】：

根据 Bootstrap Docs，如果您需要动态设置 data-content，则不应将其指定为属性。

试试这个，

HTML

<div class="container">
  <h3>Popover Example</h3>
  <a href="#" data-toggle="popover" title="Popover Header">Toggle popover</a>
</div>

$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
    html:true,
    content:function(){
    return ("<span class='glyphicon glyphicon-user'>Hello</span>");
    },
    });   
});

Working Fiddle

希望这有帮助..

【讨论】：

【解决方案2】：

尝试在字形代码周围使用单引号：

$(this).attr("data-content",'<span class="glyphicon glyphicon-warning-sign" 
aria-hidden="true"></span>You can't unlist if you have upcoming events 
scheduled');

【讨论】：