动态更改Bootstrap Popovers中的文本

Question

我正在创建一个弹出窗口，其中有多个页面（不同的内容材料），当点击弹窗时会进行更新。这个想法是，你切换popover和“page1”内容加载，点击它将加载“page2”内容。

var $btn = $("#myButton"); 

$("html").click(function(){ 
    $btn.popover('hide'); 
}); 

$btn.popover({title: "Popover", html: "true", trigger: "manual", placement: "top", content: "<div id='page1'>Page 1</div>"}).click(function(e) { 
$btn.popover('toggle'); 
e.stopPropagation(); 
}); 

我怎样才能做到沿此线的东西：

$("#page1").click(function() { 
    $btn.popover.options.content = 'Page 2'; 
}); 

同时融入关闭每当别的单击该酥料饼，如this answer的功能？

Answer 1

使用.html更改内容，并在单击除#page1以外的其他任何内容时隐藏弹出窗口。

$('body').on('click', '#page1', function(e){ 
    $(this).html('Page 2'); 
    e.stopPropagation(); 
}); 

$("html").on('click', ':not("#page1")',function(){ 
    $btn.popover('hide'); 
}); 

Fiddle

Answer 2

我会改变你的触发“专注”如果单击框外，并添加所有的内容作为标签内容，其封闭酥料饼。