如何在隐藏它之后保留bootstrap popover的内容，或者如何真正隐藏它 [英] How to keep content of bootstrap popover after hiding it, or how to really hide it

问题描述

我注意到隐藏的boostrap popover似乎会破坏内容并在显示时重做它。

请看一下这个例子。

如果你写输入，隐藏弹出框并再次显示，输入将为空。

它不应该只显示它​​然后再显示它而不使用内容吗？ / p>

避免这种情况的最佳方法是什么？我是否必须显示：无我自己的popover，还是有自举方式？

请注意我我对存储和保留输入的文本不感兴趣，这不是这个问题的重点，我想保留html，因为它是在内部加载和激活的jquery插件。

解决方案

我有类似的需求。我使用popover来显示就地编辑表单字段。保存该值后，如果再次单击该弹出窗口，则会复制相同的源HTML并选择旧值。我在设置值更新和其他一些事情，没有任何效果，或者我对结果不满意。

我想出了这个解决方案，而不是让显示/隐藏事件触发器我手动显示和隐藏弹出窗口。

  $（document）.on（'click'，' .ajax-value'，function（）{
 //我们只想在
 if（typeof $（this）.data（'bs.popover'）==undefined）时初始化popover {
 //初始化popover并立即显示
 $（this）.popover（{
'content'：$（this）.closest（'。ajax-edit'）。find（ '.ajax-field'）。html（），
'html'：true，
'title'：$（this）.attr（'data-title'），
'的位置'：'auto'
}）。popover（'show'）; 
 
 //挂钩显示事件并返回false，这样父节点就不会运行
 $（this）。 on（'show.bs.popover'，function（）{
返回false ; 
}）; 
 
 //隐藏相同，不要让父执行
 $（this）.on（'hide.bs.popover'，function（） {
返回false; 
}）; 
} else {
 //如果我们已经创建了popover，只需切换隐藏的类
 $（this）.closest（'。ajax-edit'）。find（'。popover'）。 toggleClass（ '隐藏'）; 
} 
}）; 
 
 //这是popover中的自定义关闭按钮
 $（document）.on（'click'，'。ajax-field-close'，function（）{
 //只需添加隐藏的类
 $（this）.closest（'。ajax-edit'）。find（'。popover'）。addClass（'hidden'）; 
}）; 
  

It has come to my attention that the boostrap popover when hidden seems to destroy the content and redo it when you show it.

Please take a look a this example.

If you write on the input, hide the popover and show it again, the input will be empty.

Shouldn't it just not display it and then show it again, without using the content?

What's the best way to avoid that? Do I have to display: none the popover myself, or is there a bootstrap way?

Note that I'm not interested in storing and keeping the text of the input, that's not the point of this question, I want to keep the html as it is because of a jquery plugin that is loaded and activated inside.

解决方案

I had a similar need. I am using popover to display an in place edit form field. Once the value was saved, if you clicked the popover again the same source HTML was copied and the old value was selected. I played with setting the value on update and a few other things and nothing worked or I was not happy with the result.

I came up with this solution where instead of letting the show/hide events trigger I manually show and hide the popover.

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

这篇关于如何在隐藏它之后保留bootstrap popover的内容，或者如何真正隐藏它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！