Bootstrap popover уничтожает и воссоздает работы только каждый второй раз

Question

Я хочу программно уничтожить и воссоздать конкретный поповер. Итак, что я делаю:

$('#popoverspan').popover('destroy');
$('#popoverspan').popover({placement : 'bottom', trigger : 'hover', content : 'Here it is!'});

И это работает только каждый второй раз. Я думал, что это вопрос времени, которое требуется, чтобы уничтожить поповер, но даже добавление задержки между двумя строками не помогает. Я воссоздал проблему в JSFiddle: http://jsfiddle.net/Lfp9ssd0/10/

Почему это так? Предполагается, что это работает, например, в Twitter Bootstrap Popover с динамически генерируемым контентом с помощью ajax и Bootstrap Popover Reinitialization (для обновления контента)

Он прекрасно работает, когда я пропускаю уничтожение, но я не уверен, что произойдет, когда я создаю еще один всплывающий элемент для элемента, не разрушая уже существующий. Повторно инициализировано или создается новый поповер с потерей доступа к старому?

Answer 1

Решил это сам. По-видимому .popover('destroy') является асинхронным, и немедленное создание другого всплывающего окна не выполняется, а предыдущий уничтожается. Я попытался добавить задержку с помощью alert, который не удалось по какой-то причине. С помощью setTimeout() Перед созданием нового поповера это не самое элегантное, но рабочее решение:

$('#popoverspan').popover('destroy');
setTimeout(function () {
    $('#popoverspan').popover({
        placement : 'bottom', 
        trigger : 'hover', 
        content : 'Here is new popover!'
    });
}, 200);

200 мс кажется достаточно, но в других случаях может потребоваться предварительная настройка.

Answer 2

У меня была такая же проблема, как описано здесь. После тщательного поиска я нашел способ изменить содержимое всплывающего окна без необходимости сначала его уничтожать. Просто инициализируйте поповер без указания опции контента.

$('#popoverspan').popover({
    placement : 'bottom',
    trigger : 'hover', 
});

Обратите внимание, что приведенная выше инициализация popover не определяет содержимое. Поповер не может быть показан, у него нет контента. Теперь задайте условие, которое затем приводит к различным типам текстов, отображаемых в поповер.

if (condition_1) {
    $("#popoverspan").data('bs.popover').options.content = "Something important here!"
}
else {
    $("#popoverspan").data('bs.popover').options.content = "This is also important!"
}

Теперь мы готовы показать поповер.

$("#popoverspan").popover('show');

Это сработало для меня с Bootstrap 3.0. Конечно, когда вы будете готовы, вы всегда можете уничтожить или скрыть свой поповер, как обычно, когда на вашей странице происходит соответствующее событие.

Обновление: если вам просто нужно изменить текст в всплывающем окне после того, как всплывающее окно уже отображается, вы можете по существу использовать ту же технику. 1) Возьмите DOM, к которому подключен popover, затем измените содержимое и 2) снова покажите popover. Пример ниже:

$("#popoverspan").data('bs.popover').options.content = "some new text";
$("#popoverspan").popover('show');

Answer 3

Установка 'animation': false исправил это для меня

Answer 4

Ответ @Deniz отличный, но если вы хотите изменить заголовок / контент после отображения всплывающего окна и используете более старые версии Bootstrap (у меня версия 3.3.1), вам следует использовать $('.your_popover_target').data('popover').options.content = "new text" вместо .data('bs.popover'), с последующим $('.your_popover_target').popover('show');

Answer 5

Я попробовал подход setTimeout, и по какой-то причине он не сработал, а затем я углубился в popover объект, и на самом деле есть destroy() метод, который работал просто отлично. Например:

var popover = $.data($('#popoverspan'), "bs.popover");
popover.destroy();

Answer 6

Это сработало для меня в Bootstrap 5:

      const toggler = document.querySelector('#popoverspan');
const popover = bootstrap.Popover.getInstance(toggler);
if (popover) {
    popover.dispose();
}
new bootstrap.Popover(toggler, options);