Twitter Bootstrap Popover con contenuto generato dinamicamente tramite ajax

Question

Sono disposto a configurare Bootstrap Popover per mostrare l'elenco di e-mail che sono state inviate all'utente. Il contenuto viene quindi generato dinamicamente tramite una chiamata ajax. Qui è il mio pezzo di codice:

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

Come si può vedere, si innescherà una chiamata AJAX su ogni mouseover sulle <tr> 's del <table>. Come funziona perfettamente quando la pagina viene caricata per la prima volta, quando apporto una modifica nel numero di mail inviate, non mostra l'elenco aggiornato quando lo faccio di nuovo (funziona se ricarico la pagina ovviamente). Riesco a vedere nell'anteprima delle richieste XHR nella barra degli strumenti di Chrome Developper l'elenco aggiornato ma non lo carica nel contenuto del popover. Mantiene la vecchia lista.

Qualsiasi aiuto sarebbe molto apprezzato. Grazie!

Answer 1

Si dovrebbe distruggere l'esistente utilizzando popover:

$tr.popover('destroy'); 

quindi creare la nuova popover utilizzando il codice:

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