Question

所以我在v3.2中遇到了bootstrap 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>
});

htmlOptions包含带有复选框的html。

<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('hide');隐藏弹出窗口时，弹出窗口将从dom中移除。当我用$(..).popover('show');重新打开弹出框时，未显示更改的内容（例如，选中复选框），因为弹出窗口已从dom中删除。

如何禁用从dom中删除的弹出窗口？

Answer 1

Bootstrap 4

虽然这个问题是2岁并且要求BS 3.2我决定分享我的解决方案因为问题＆＃39;仍然存在于Bootstrap 4中。

$('#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());
}

}）;

正如您所看到的，我已经实现了两个弹出窗口（音频菜单和样式菜单）。每次触发隐藏事件时，您都可以通过从数据属性中提取隐藏弹出框来获取隐藏弹出窗口的ID。（在我的情况下，我必须检查ID是否为空，因为我的弹出窗口（＆＃39; hide＆＃39;）也被其他功能触发，即使弹出窗口也没有显示。所以也许你可以离开那个）。

请记住，＆＃34;这个＆＃34;不是你的popover，因为它代表它的DOM。在我的例子中，它是一个填充了data-content属性的按钮。要获得“真实”的内容。 popover我们可以使用ID并搜索DOM。在下一步中，您可以执行下面Dominik Vogt所述的复选框处理。之后，您可以再次将修改后的内容保存在data-content属性中。

Answer 2

解决方法是根据更改的元素更改$(elem).data('bs.popover').options.content 'hide.bs.popover'。为此，我需要检查选中的复选框。

因此，我们可以更新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();
});

关闭时从dom中删除bootstrap popover

2 个答案: