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 验证的每个 popover 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 回答