Twitter Bootstrap Popover с динамически генерируемым контентом через ajax

Question

Я хочу настроить Bootstrap Popover, чтобы показать список адресов электронной почты, которые были отправлены пользователю. Поэтому контент генерируется динамически через ajax вызов. Вот мой кусок кода:

    $('#liste').on('mouseover', 'tr[data-toggle=popover]', function(e) {
        var $tr = $(this);
        id = $(this).data('id');
        $.ajax({
            url: '<?php echo $this->url(array(), 'loadRelance');?>',
            data: {id: id},
            dataType: 'html',
            success: function(html) {
                $tr.popover({
                    title: 'Relance',
                    content: html,
                    placement: 'top',
                    html: true,
                    trigger: 'hover'
                }).popover('show');
            }
        });
    });

Как вы можете видеть, это вызовет вызов ajax на каждом mouseover на <tr>из <table>, Поскольку он отлично работает, когда страница загружается в первый раз, когда я изменяю количество отправленных писем, он не показывает обновленный список, когда я делаю его снова (конечно, работает, если я перезагружаю страницу). Я вижу в предварительном просмотре запросов XHR на панели инструментов Chrome Developper обновленный список, но он не загружает его в содержимое всплывающего окна. Он сохраняет старый список.

Любая помощь приветствуется. Спасибо!

Answer 1

Вы должны уничтожить существующий поповер, используя:

$tr.popover('destroy');

Затем создайте новый поповер, используя ваш код:

$tr.popover({options}).popover('show');