在Bootstrap Popovers中動態更改文本

Question

我正在尋找一個彈出窗口，它具有多個頁面（不同的內容材料），這些頁面在單擊彈出窗口時會更新。 這個想法是，您切換彈出窗口並加載“ 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';
});

同時結合了在單擊其他任何內容時都關閉彈出窗口的功能，例如在此答案中 ？

Answer 1

單擊#page1以外的任何內容時，請使用.html更改內容並隱藏彈出窗口。

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

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

小提琴

Answer 2

我將觸發器更改為“焦點”，如果您在框外單擊並將所有內容添加為選項卡式內容，則會關閉彈出窗口。