Twitter bootstrap 引导popover在关闭时从dom中删除

因此，我在v3.2中遇到了一个bootstrap popover问题。我创建了一个具有可更改内容（复选框）的popover

$（elem）.popover({
容器：'主体'，
触发器：“手动”，
位置：'自动顶部'，
选择器：false，
标题：“反馈”，
是的，
内容：htmlOptions，
模板：“gefällt dir是dem Foto吗？”？
});

htmlOptions包含带有复选框的html

$(elem).popover({
    container: 'body',
    trigger: 'manual',
    placement: 'auto top',
    selector: false,
    title: 'Feedback',
    html: true,
    content: htmlOptions,
    template: '<div class="popover popover-feedback" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><small class="popover-subtitle">Was gefällt dir an dem Foto?</small><div class="popover-content"></div></div>
});

<div class="checkbox right"><label><input type="checkbox" checkbox-id="0" checked>Inspiration</label></div>
<div class="checkbox right"><label><input type="checkbox" checkbox-id="1">Kreativität</label></div>
<div class="checkbox right"><label><input type="checkbox" checkbox-id="2">Komposition</label></div>
<div class="checkbox right"><label><input type="checkbox" checkbox-id="3">Qualität</label></div>

灵感
克雷蒂维特
科姆普莱斯
Qualität

当我用

$（..）.popover（'hide'）隐藏popover时将从dom中删除popover。当我用
$（..）.popover（'show'）重新打开popover时未显示更改的内容（例如，复选框），因为已从dom中删除了popover

如何禁用从dom中删除的popover？
解决方案是根据更改的元素更改
$（elem）.data（'bs.popover'）.options.content上的
'hide.bs.popover'
。为此，我需要检查复选框

$(elem).popover({
    container: 'body',
    trigger: 'manual',
    placement: 'auto top',
    selector: false,
    title: 'Feedback',
    html: true,
    content: htmlOptions,
    template: '<div class="popover popover-feedback" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><small class="popover-subtitle">Was gefällt dir an dem Foto?</small><div class="popover-content"></div></div>
});

<div class="checkbox right"><label><input type="checkbox" checkbox-id="0" checked>Inspiration</label></div>
<div class="checkbox right"><label><input type="checkbox" checkbox-id="1">Kreativität</label></div>
<div class="checkbox right"><label><input type="checkbox" checkbox-id="2">Komposition</label></div>
<div class="checkbox right"><label><input type="checkbox" checkbox-id="3">Qualität</label></div>

因此，我们可以更新popover对象内部的内容，而不是不从dom中删除对象

因此，总的来说，答案是

$(elem).on('hide.bs.popover', function (e) {
    var popover = $(this);
    var popoverContent = popover.data('bs.popover').$tip.find('.popover-content');
    var checkboxes = popoverContent.find("input[type=checkbox]");
    checkboxes.each(function(){ 
        var checkbox = $(this);
        var checked = checkbox.prop('checked');
        checkbox.attr('checked', checked);
    });
    popover.data('bs.popover').options.content = popoverContent.html();
});

引导4

虽然这个问题已经问了2年了，并且要求使用BS3.2，但我还是决定分享我的解决方案，因为“问题”仍然存在于Bootstrap4中

$('#audio-menu, #style-menu').on('hide.bs.popover', function (e) {
var id = $(this).data('bs.popover').tip.id;
if(id) {
    var content = $('#'+id).find('.popover-body');
    var checkboxes = content.find("input[type=checkbox]");
    checkboxes.each(function(){
        var checkbox = $(this);
        var checked = checkbox.prop('checked');
        checkbox.attr('checked', checked);
    });
    $(this).attr('data-content', content.html());
}

}))

如您所见，我实现了两个弹出窗口（音频菜单和样式菜单）。每次触发hide事件时，您都将通过从数据属性提取隐藏popover的ID来获取它。（在我的例子中，我必须检查ID是否不是空的，因为我的popover（'hide'）也被其他函数触发，甚至popover也没有显示。所以也许你可以省去它）

请记住，“this”不是您的popover，因为它是由DOM表示的。在我的例子中，它是一个填充了数据内容属性的按钮。要获取“真实”popover的内容，我们可以使用ID并搜索DOM。在下一步中，您可以按照下面Dominik Vogt所述进行复选框处理。之后，您可以再次将修改后的内容保存在“数据内容”属性中
 什么是
htmlOptions
？我使用popover来显示要单击的不同选项。htmlOptions包含我在函数中编译的复选框，如：
。。html+=''+此.title+''
我将其添加到questionTry中，使用jQuery对象而不是字符串来表示
内容。