如何在隐藏它之后保留bootstrap popover的内容，或者如何真正隐藏它
我注意到隐藏的boostrap popover似乎会破坏内容并在显示时重做它。
请看一个这个例子 。
如果您在输入上书写，隐藏弹出框并再次显示它，输入将为空。
它不应该只是不显示它然后再显示它，而不使用内容？
什么是避免这种情况的最佳方法？ 我必须自己display: none popover，或者是否有引导方式？
请注意，我对存储和保留输入的文本不感兴趣，这不是这个问题的重点，我想保留html，因为它是在内部加载和激活的jquery插件。
我有类似的需求。 我使用popover来显示一个就地编辑表单字段。 保存该值后，如果再次单击该弹出窗口，则会复制相同的源HTML并选择旧值。 我玩的是设置值更新和其他一些东西，没有任何效果，或者我对结果不满意。
我提出了这个解决方案，而不是让显示/隐藏事件触发我手动显示和隐藏弹出窗口。
$(document).on('click', '.ajax-value', function() { // We only want to init the popover once if (typeof $(this).data('bs.popover') == "undefined") { // Init the popover and show immediately $(this).popover({ 'content': $(this).closest('.ajax-edit').find('.ajax-field').html(), 'html': true, 'title': $(this).attr('data-title'), 'placement': 'auto' }).popover('show'); // Hook into show event and return false so parent does not run $(this).on('show.bs.popover', function () { return false; }); // Same for hide, don't let parent execute $(this).on('hide.bs.popover', function () { return false; }); } else { // If we already created popover, just toggle hidden class $(this).closest('.ajax-edit').find('.popover').toggleClass('hidden'); } }); // This is a custom close button in the popover $(document).on('click', '.ajax-field-close', function(){ // Just add the hidden class $(this).closest('.ajax-edit').find('.popover').addClass('hidden'); });
不可能只使用默认引导程序“隐藏”弹出窗口，事件.popover('hide')将破坏HTML弹出窗口（而.popover('destroy')从元素中销毁.popover('destroy')属性）。
我认为解决这个问题的最佳方法是在隐藏弹出窗口时保存要保存的内容，并在弹出窗口时替换它。 您可以使用shown.bs.popover事件执行此操作： shown.bs.popover和hide.bs.popover 。
// By default, your popover content is empty, and you got somewhere a which is hidden $('a').on('shown.bs.popover', function (e) { $(this).data('bs.popover').$tip.find('.popover-content') .html('') .append($('#mypopovercontent')) ; $('#mypopovercontent').show(); }) ; $('a').on('hide.bs.popover', function (e) { $('body').append($('#mypopovercontent')) ; $('#mypopovercontent').hide(); }) ;
我没有检查上面的代码，但你明白了！
为什么不克隆HTML并将其用作您的内容？
My Popover $('[rel="popover"]').popover({ container: 'body', html: true, content: function () { var clone = $($(this).data('popover-content')).clone(true).removeClass('hide'); return clone; } })
我偶然发现了这个问题并最终制定了自己的解决方案，以便我可以使用颜色选择器。 它类似于Holt的答案，除了它实际上将两个不同的父div之间的HTML转移，其中一个是隐藏的。 这样，保留了用户所做的任何更改。
使用此代码，您将在#color-picker-popover-parent启动HTML，这是一个隐藏的div。 我只在Bootstrap v3中尝试过它。
$('.color-button').popover({ html: true, content: '', title: '', placement: 'bottom' }).on('hide.bs.popover',function(){ $('#color-picker-popover').detach().appendTo('#color-picker-popover-parent'); }).on('inserted.bs.popover',function(){ if($('#color-picker-popover-temp-parent').length) { $('#color-picker-popover').detach().appendTo('#color-picker-popover-temp-parent'); } });