js用append方法追加bootstrap中popover的data-content内容时样式不显示的解决办法

本文链接：https://blog.csdn.net/qq_19246031/article/details/84495894

今天做一个小功能时，想用bootstrap的popover弹出框做如下效果：

我很乖地按照教程敲下代码

+"<button class='btn btn-warning' title='"+data.result[i].student_name+"的其他信息'"
+" data-content='<ul><li>出生日期："+timeStamp2Date(data.result[i].student_age)+" </li><li>更新者："+data.result[i].student_updated_name+" </li><li> 更新时间："+timeStamp2Date(data.result[i].student_updated_date)+"</li>'"
+" data-toggle='popover' data-placement='right' data-container='body'>详情</button>"

$(function () { 
	$("[data-toggle='popover']").popover();
});

却得到这个效果，样式无法显示：

后来仔细看了文档，如下即可：

$(function () { 
	$("[data-toggle='popover']").popover({html : true });
});

菜鸟教程，隐藏好深啊：http://www.runoob.com/bootstrap/bootstrap-popover-plugin.html

以下是菜鸟的例子：


<div class="container" style="padding: 100px 50px 10px;" >
    <button type="button" class="btn btn-default popover-show"
            title="Popover title" data-container="body"
            data-toggle="popover" data-placement="left"
            data-content="左侧的 Popover 中的一些内容 —— show 方法">
        左侧的 Popover
    </button>
    <button type="button" class="btn btn-primary popover-hide"
            title="Popover title" data-container="body"
            data-toggle="popover" data-placement="top"
            data-content="顶部的 Popover 中的一些内容 —— hide 方法">
        顶部的 Popover
    </button>
    <button type="button" class="btn btn-success popover-destroy"
            title="Popover title" data-container="body"
            data-toggle="popover" data-placement="bottom"
            data-content="底部的 Popover 中的一些内容 —— destroy 方法">
        底部的 Popover
    </button>
    <button type="button" class="btn btn-warning popover-toggle"
            title="Popover title" data-container="body"
            data-toggle="popover" data-placement="right"
            data-content="右侧的 Popover 中的一些内容 —— toggle 方法">
        右侧的 Popover
    </button><br><br><br><br><br><br>
    <p class="popover-options">
        <a href="#" type="button" class="btn btn-warning" title="<h2>Title</h2>"
           data-container="body" data-toggle="popover" data-content="
         <h4>Popover 中的一些内容 —— options 方法</h4>">
            Popover
        </a>
    </p>
    <script>
$(function () { $('.popover-show').popover('show');});
        $(function () { $('.popover-hide').popover('hide');});
        $(function () { $('.popover-destroy').popover('destroy');});
        $(function () { $('.popover-toggle').popover('toggle');});
        $(function () { $(".popover-options a").popover({html : true });});
</script>
</div>

希望对你们有帮助。