Twitter Bootstrap Popover with dynamically generated content via ajax

Question

I'm willing to set up Bootstrap Popover to show the emails list that have been sent to the user. The content is therefore dynamically generated via an ajax call. Here is my piece of code :

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

As you can see, it'll trigger an ajax call on each mouseover on the <tr>'s of the <table>. As it works perfectly when the page is loaded for the first time, when I make a change in the number of mail sent, it doesn't show the updated list when I do over it again (it works if I reload the page of course). I can see in the preview of XHR requests in the Chrome Developper Toolbar the updated list but it doesn't load it in the content of the popover. It keeps the old list.

Any help would be much appreciated. Thanks!

Answer 1

You should destroy the existing popover using:

$tr.popover('destroy');

Then create the new popover using your code:

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