Bootstrap里如何动态创建一个popover

Question

Bootstrap里如何动态创建一个popover或者说如何创建一个弹出层。比如点击购买按钮，创建一个层，提示购买成功与否的结果，点确定关闭。

Answer 1

一种简单的方法就是自己写 popover 的 html，并且在需要显示 popover 的地方控制内容变化。

$("#your-button").popover({
    html: true,
    content: '<div id="content">...</div>'
})
.click(function() {
    $("#content").text('YOUR CONTENT');
});

P.S. 最新的 bootstrap 3 的 popover(options) 初始化参数里提供了修改默认 popover template html 的选项，我没有实际用过不确定有没有坑，看起来会比上面的方法更加优雅。

Answer 2

popover是不是必须依赖html控件？Html代码如下

<button id="add-cart" type="button" class="btn btn-warning btn-lg" data-loading-text="处理中..." onclick="addCart(1234)">
                            <span class="glyphicon glyphicon-shopping-cart"></span>加入购物车</button>
 <span id="add-cart-alert"></span>

js代码如下：

function addCart(id) {
if (!checkSelectSpec()) {
    return false;
}

$("#add-cart").button('loading');

var url = "/WebHandler/ShopCartHandler.ashx?t=add&id=" + id;
$.getJSON(url, function (data) {
    if (data.errmsg == '') {
        $("#add-cart").button('reset');
        //alert("商品已成功添加到购物车!");
        $('#add-cart-alert').popover({title:'购物车状态',content:'商品已成功添加到购物车!',delay: { show: 500, hide: 100 }});
    }
    else {
        $("#add-cart").button('reset');
        alert("商品添加到购物车失败!"+data.errmsg);
        //$('#add-cart').popover({title:'购物车状态',content:'商品添加到购物车失败!'})

    }
});

};

点击购买无任何反应，页面里是否要初始化popover？