一般我们通过下面代码进行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后要加个延时初始化,否则可能会出现页面未重新绑定的情况。