如何在 jquery 中的 bootstrap 弹出窗口内容中放置一个字形图标

Question

我想在弹出窗口的内容旁边添加一个字形图标，它将在 jquery 中动态完成。但是当我为字形图标添加 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"

Answer 1

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

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

Answer 2

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

试试这个，

HTML

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

JS

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

Working Fiddle

希望对您有所帮助..

如何在 jquery 中的 bootstrap 弹出窗口内容中放置一个字形图标

How to put a glyphicon inside the bootstrap popover content in jquery

html

css

jquery

twitter-bootstrap

glyphicons