Twitter Bootstrap Popover通过ajax动态生成内容

时间:2014-04-14 08:56:56

标签: jquery ajax twitter-bootstrap popover

我愿意设置Bootstrap Popover来显示已发送给用户的电子邮件列表。因此,内容通过ajax调用动态生成。这是我的代码:

    $('#liste').on('mouseover', 'tr[data-toggle=popover]', function(e) {
        var $tr = $(this);
        id = $(this).data('id');
        $.ajax({
            url: '<?php echo $this->url(array(), 'loadRelance');?>',
            data: {id: id},
            dataType: 'html',
            success: function(html) {
                $tr.popover({
                    title: 'Relance',
                    content: html,
                    placement: 'top',
                    html: true,
                    trigger: 'hover'
                }).popover('show');
            }
        });
    });

如您所见,它会在mouseover的{​​{1}}上的每个<tr>上触发ajax调用。因为它在第一次加载页面时工作得很好,当我更改发送的邮件数量时,当我再次执行它时它不会显示更新的列表(如果我重新加载页面它会起作用)当然)。我可以在Chrome开发者工具栏的XHR请求预览中看到更新后的列表,但它并没有将其加载到弹出窗口的内容中。它保留了旧列表。

非常感谢任何帮助。 谢谢!

1 个答案:

答案 0 :(得分:10)

你应该使用以下方法销毁现有的popover:

$tr.popover('destroy');

然后使用您的代码创建新的弹出窗口:

$tr.popover({options}).popover('show');