twitter-bootstrap – 更新data-content属性时,Twitter bootstra

发布时间：2020-12-18 00:22:19 所属栏目：安全来源：网络整理

导读：我正在使用弹出窗口显示一些信息,我在ajax请求后更新.基本上,我正在更新在悬停时触发弹出窗口的元素的data-content属性.我正在检查dom,数据内容的东西肯定在更新,但是popover的内容保持不变.我一直在尝试我能想到的一切,并开始觉得我错过了一些简单的东西.有

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

<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);
                });
        )};
}

现在就像我说的那样全部像我期望的那样工作,并更新每个popover li的数据内容,我通过检查dom验证了,但是当我将鼠标悬停在li上时,它仍然显示数据内容的旧内容.我查看了一些帖子并尝试在我的popover instanciation中设置内容：function(){return $(this).data(‘content’);}但是这不起作用.我也试过破坏和重新创建每个元素,但是由于它在一个区间函数中并且自动触发,它会关闭一个打开的弹出窗口,如果你有一个打开它会使它看起来像马车.有任何想法吗？

解决方法

你是正确的,正确的方法是提供内容：function(){return someDynamicContent},如你所提到的.我看到你可能遇到的唯一问题是你可能没有意识到$(‘.player_name_li’).data(‘content’)不会自动与$(‘??.player_name_li’)的操作保持同步. (“数据内容”).您需要确保在AJAX回调中更改的那个与您在内容定义中引用的那个相同.

如果你定义

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

如果你这样做,插件将在幕后重新初始化.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!