javascript - 动态更改 Bootstrap 弹出窗口中的文本

Question

我正在创建一个弹出窗口，其中包含多个页面(不同的内容 Material )，这些页面在单击弹出窗口时会更新。这个想法是，您切换弹出窗口和“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