在 Bootstrap 弹出窗口中动态更改文本答案

【问题标题】：Dynamically Changing Text in Bootstrap Popovers在 Bootstrap 弹出窗口中动态更改文本
【发布时间】：2016-09-26 05:34:50
【问题描述】：

我正在寻找一个弹出框，其中包含多个页面（不同的内容材料），当点击弹出框时会更新。这个想法是您切换弹出框和“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?

【问题讨论】：

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

如果您在框外单击并将所有内容添加为选项卡式内容，我会将您的触发器更改为“焦点”以关闭弹出框。

【讨论】：

【解决方案2】：

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

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

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

Fiddle

【讨论】：