Jquery bootstrap popover：使用ajax重新加载内容

我在用ajax重新加载bootstrap popover的内容时遇到问题。 下面是一些代码：

第二个ajax请求（当我单击“a.close”时）返回一个更新的内容（我可以在控制台中看到），但它没有加载到popover中

我四处寻找解决办法，但似乎没有一个奏效

我还能试什么？

---

谢谢你

同样的问题，我用这个技巧解决了它，代码很冗长，只是一个例子，优化它

// functions container
var doc = 
{
    doPopover : function( item_id, title, content )
    {
        // get jq item
        var item = $('#' + item_id );

        // the trick to "refresh content" in every call
        item.attr('data-content', content);

        // popover
        item.popover(
        {
            title   :   title,
            trigger :   'manual'
        }).popover('show');
    },

    popoverFirstCall : function()
    {
        this.doPopover('myDiv', 'Title', 'MyContent1');
    },

    popoverSecondCall : function()
    {
        var content = 'xxx'; // get the content in Ajax

        this.doPopover('myDiv', 'Title', content);
    }
}

// call funcs in your views
$(document).ready(function()
{
    // first popover with first content
    doc.popoverFirstCall();

    // this event wich call the ajax content and refresh popover. 
    $('#button').on('click', $.proxy(doc, 'popoverSecondCall'));
});

我想刷新标题的技巧也是一样的

如果你有更好的解决方案，请告诉我

编辑：

我继续调查,

我们可以在插件代码上看到：

getContent: function () {
      var content
        , $e = this.$element
        , o = this.options

      content = $e.attr('data-content')
        || (typeof o.content == 'function' ? o.content.call($e[0]) :  o.content)

      return content
    }

因此，内容是以attr“data content”或popover的第一次调用（实例化）时给出的选项为基础的

但实际上，问题是，选项是缓存的，而不是每次调用都刷新，所以wa必须使用：

$('item_id').attr('data-content', 'some content'); // and warning, it is different than
$('item_id').data('content', 'some content');

引导程序以attr方式运行

标题相同：

getTitle: function () {

      var title
        , $e = this.$element
        , o = this.options

      title = $e.attr('data-original-title')
        || (typeof o.title == 'function' ? o.title.call($e[0]) :  o.title)

      return title
    }

因此，dopoover函数可以是：

    doPopover : function( item_id, title, content )
    {
        // get jq item
        var item = $('#' + item_id );

        // the trick to "refresh content" in every call
        item.attr('data-content', content); // do not use data() way.
        item.attr('data-original-title', title);

        // popover (trace first call if you want)
        item.popover(
        {
            trigger :   'manual'
        });

        item.popover('show);
    }

---

对我来说工作正常。

您可以直接访问popover工具提示内容，而不是重置

数据内容属性

替换以下行：

t.attr('data-content', r);

使用此工作代码：

t.data('popover').tip().html(r);

2012年更新

正如他在评论中指出的，这将破坏popover的默认模板。更好的解决方案是替换
.popover content
的内容：

t.data('popover').tip().find('.popover-content').empty().append(r);

2016年更新

感谢另一条评论，以下是Bootstrap 3的工作代码：

t.data('bs.popover').tip().find('.popover-content').empty().append(r);

当你可以直接替换的时候，为什么
empty（）
然后
append（）

t.data('popover').tip().find('.popover-content').html(r);

编辑：

此外，当popover已经初始化并且您希望动态更改内容时，第一种方法是正确的，并且工作正常（bootstrap 2.1）。您只需再次调用
'show'
即可刷新popover（内容和位置）：

这项工作来自我：
在文档就绪时对popover进行本地化（数据是一个json，包含HTML和找到的元素大小）

}))

在popover的触发事件中，必须依次切换popover（显示或隐藏），使popover内容为空，最后追加data.html

$("#notifiche").click(function(){

     $.get("/alpha/annuncio/scegliGestione", function(data) {
         $('#notifiche').popover('toggle')
         $("body").find('.popover-content').empty()
         $("body").find('.popover-content').append(data.html);

         $('#notifiche').find(".badge").text(data.size);
     });
    /* */

 });

经过几个小时的搜索，我找到了答案。对于Bootstrap3，您可以使用下面的代码。更多参考资料包括：
及
if（$element.data（'bs.popover'））{
$element.data（'bs.popover'）.options.content='newcontent'；
}
这对我很有帮助，但是如果您不想删除popover的默认模板，您应该执行类似的操作：
t.data（'popover'）.tip（）.find（.popover content”）.empty（）.append（r）
对于bootstrap 3版本，您需要交换：
t.data（'.popover'）
与
t.data（'bs.popover'）
item.attr（'data-content'，content）；作品谢谢使用Bootstrap v2.0.4也适用于Bootstrap 3，尽管仅使用
.attr（）
与您的示例相同，
.data（）
不会影响buddy。在所有的解决方案中，这一个效果很好。
     $.ajax({
url: "/alpha/annuncio/scegliGestione",
success: function (data) {
    $('#notifiche').popover(
        {
            title:"Le tue notifiche",
            placement:'bottom',
            trigger:'manual'
        });
    $('#notifiche').find(".badge").text(data.size);

}

$("#notifiche").click(function(){

     $.get("/alpha/annuncio/scegliGestione", function(data) {
         $('#notifiche').popover('toggle')
         $("body").find('.popover-content').empty()
         $("body").find('.popover-content').append(data.html);

         $('#notifiche').find(".badge").text(data.size);
     });
    /* */

 });