Bootstrap popover destroy & recreate работает только раз в два раза

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

$('#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 (для обновления содержимого)

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

Ответы

Ответ 1

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

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

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

Ответ 2

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

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

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

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

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

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

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

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

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

Ответ 3

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

Ответ 4

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

Ответ 5

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

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