Twitterのブートストラップjs popoverのコンテンツは、データコンテンツの属性が更新されたときに更新されません。

Question

ajaxリクエスト後に更新している情報を表示するためにポップオーバーを使用しています。基本的には、ホバー上のポップオーバーをトリガーする要素のdata-content属性を更新しています。私はDOMをチェックしており、データコンテンツは確実に更新されていますが、ポップオーバーのコンテンツは同じままです。私は考えることができるすべてを試してきたし、何か簡単なものを見逃しているように感じ始めている。誰かが私を助けることができますか？彼女のいくつかのコード：

<ul> 
    <li class="player_name_li" rel="popover" data-placement="right" 
    data-html="true" data-title="Dude" data-trigger="hover" 
    data-content="<div class='custom_content'>Heres some content</div>" 
    data-original-title="" title=""><span class="player_name">Dude</span> 
    </li> 
</ul> 

、その後、私のスクリプト今

$(document).ready(function(){ 
$('.player_name_li').popover({ 
    template: '<div class="popover" style="width:250px;"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'}); 

setInterval(function(){update_scores();}, 6000); 

function update_scores() 
{ 
    $.ajax({ 
     url: HOST_NAME, 
     type: 'POST', 
     //async: false, 
     data: {player_array: my_data_is_generated_from_page)} 
    }).done(function(results){ 
     var obj = $.parseJSON(results);  
     //this reloads the stupid popover data 
     $.each(obj.fancy_return, function(index, value){ 
     $('.player_info_link').each(function(){    
      var huh = $(this).closest('li'); 
      huh.attr('data-content', value.new_table); 
       }); 
     )}; 
} 

私はすべて私が期待するように働く、と私は、DOMを検査することによって検証各ポップオーバー李のデータ・コンテンツを更新thatsの言ったように、しかし、私が里にぶつかったとき、それはまだデータ内容の古い内容を示しています。私はいくつかの投稿を見て、content: function(){return $(this).data('content');}と私のinstanciationの機能でコンテンツを設定しようとしましたが、それは動作しませんでした。私はまた、動作する各要素を破壊し再作成しようとしましたが、インターバル関数の中でそれが自動的に起動されているので、開いているポップアップを閉じると、バグのように見えます。何か案は？

Answer 1

正しい方法は、前述のとおりcontent: function(){return someDynamicContent}とすることです。あなたが遭遇したかもしれない唯一の問題は、$('.player_name_li').data('content')が$('.player_name_li').attr('data-content')の操作と自動的に同期していないことにおそらく気づいていないことです。 AJAXコールバックで変更したコールバックが、contentの定義で参照しているものと同じであることを確認する必要があります。

あなたは

$('.player_name_li') 
    .popover({ 
    template: '<div class="popover" style="width:250px;"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>', 
    content: function(){return $(this).data('content')} 
    }) 

を定義するなら、あなたは、あなたがそれをこのように行う場合は、プラグインは舞台裏で、すべての再初期化を行います

huh.data('content', value.new_table); 

を使用する必要があります。