BootStrap弹出框popover二次动态绑定问题

一般我们通过下面代码进行popover的初始化：

<div class="container" style="padding: 100px 50px 10px;" >
    <button type="button" class="btn btn-warning" title="Popover title"  
            data-container="body" data-toggle="popover" data-placement="right" 
            data-content="">
        右侧的 Popover
    </button>
    <button id="toggle" type="button" class="btn btn-success">toggle</button>
</div>
<div id="symbol_miss_popover_content_wrapper" style="display: none;">
    <div>囧...</div>
    <div>没有找到正确读音</div>
</div>
<div id="symbol_error_popover_content_wrapper" style="display: none;">
    <div>哇奥...</div>
    <div>服务器开了个小差</div>
</div>
</div>
<script>
$(function () { 
    $("[data-toggle='popover']").popover({});
});

假如现在你想对popover的内容进行修改，你可能会在初始化popover后面写这样的代码

    $("[data-toggle='popover']").popover("destory").popover({
        html: true,
        content: '<h1>test</h1>'
    });

但是很遗憾的是，这行代码并不起作用，.popover("destory").popover()是有问题的!

$("#toggle").on("click", function() {
        $("[data-toggle='popover']").popover("destroy");
        setTimeout(function() {
            $("[data-toggle='popover']").popover({
                html: true,
                content: function() {
                    return $("#symbol_error_popover_content_wrapper").html();
            }});
        }, 200);
        
    });

这样才是正确的，destroy和popover要分开调用，并且destroy后要加个延时初始化，否则可能会出现页面未重新绑定的情况。