更新数据内容属性时，Twitter 引导 js 弹出窗口内容不会更新 [英] Twitter bootstrap js popover content doesn't update when data-content attribute is updated

问题描述

我正在使用弹出框来显示我在 ajax 请求后更新的一些信息.基本上，我正在更新在悬停时触发弹出框的元素的 data-content 属性.我正在检查 dom，数据内容肯定在更新，但弹出框的内容保持不变.我一直在尝试我能想到的一切，并且开始觉得我错过了一些简单的东西.有人可以帮我吗.她的一些代码:

I'm using a popover to show some info that I'm updating after an ajax request. Basically, I am updating the data-content attribute of the element that triggers the popover on hover. I am checking the dom and the data-content stuff is definitely updating, but the content of the popover is staying the same. I've been trying everything I can think of and am starting to feel like I'm missing something simple. Can someone help me out. Hers some code:

<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');} as好吧，但这没有用.我还尝试销毁和重新创建每个有效的元素，但由于它处于间隔函数中并自动触发，如果您打开一个弹出窗口，它会关闭一个打开的弹出窗口，这使它看起来有问题.有什么想法吗?

now like I said thats all working like I expect, and updating each popover li's data-content which I verified by inspecting the dom, but when I hover over the li its still showing the old contents of data-content. I've looked through a few post and tried setting the content by function in my instanciation of the popover with content: function(){return $(this).data('content');} as well but that didn't work. I've also tried destroying and recreating each element which does work but since its in an interval function and fired automatically, it closes an open popover if you have one open which makes it seem buggy. Any ideas?

推荐答案

你是正确的，正确的方法是给 content: function(){return someDynamicContent}，正如你提到的.我发现您可能遇到的唯一问题是您可能不知道 $('.player_name_li').data('content') 不会自动与 $('.player_name_li').attr('data-content').您需要确保您在 AJAX 回调中更改的那个与您在 content 的定义中引用的相同.

You are correct that the proper way to do this is to give content: function(){return someDynamicContent}, as you mentioned. The only problem I see that you might have run into is that you are perhaps unaware that $('.player_name_li').data('content') does not automatically stay in sync with manipulations of $('.player_name_li').attr('data-content'). You need to make sure that the one you change in your AJAX callback is the same one you reference in the definition of 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);

如果您这样做，插件将在幕后进行所有重新初始化.

If you do it this way, the plugin will do all the reinitializing behind the scenes.

这篇关于更新数据内容属性时，Twitter 引导 js 弹出窗口内容不会更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！