8

ポップオーバーを使用して、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を調べて確認した各ポップオーバーliのデータコンテンツを更新しますが、liにカーソルを合わせるとまだデータコンテンツの古いコンテンツが表示されます。私はいくつかの投稿を調べて、ポップオーバーのインスタンス化でも機能ごとにコンテンツを設定しようとしましたcontent: function(){return $(this).data('content');}が、それは機能しませんでした。また、機能する各要素を破棄して再作成しようとしましたが、インターバル関数で自動的に起動されるため、開いているポップオーバーが開いているとバグが発生して閉じます。何か案は？

4

1 に答える 1

8

あなたが言ったように、これを行う適切な方法は与えることであるというのは正しいです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);

このようにすると、プラグインはすべての再初期化をバックグラウンドで実行します。

于 2013-04-17T18:35:37.740 に答える