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

Posted 2023-05-08

【中文标题】Twitter Bootstrap Popover 通过 ajax 动态生成内容

【英文标题】：Twitter Bootstrap Popover with dynamically generated content via ajax

【发布时间】：2014-05-28 04:01:06

【问题描述】：

我愿意设置 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');
            
        );
    );

如您所见，它将在<table> 的<tr> 上的每个mouseover 上触发一个ajax 调用。由于它在第一次加载页面时运行良好，当我更改发送的邮件数量时，当我再次执行它时它不会显示更新的列表（如果我重新加载页面当然可以）。我可以在 Chrome Developper 工具栏中的 XHR 请求预览中看到更新的列表，但它不会将其加载到弹出框的内容中。它保留旧列表。

任何帮助将不胜感激。 谢谢！

【问题讨论】：

您正在为每个鼠标悬停创建一个新的弹出框。你应该使用 $tr.popover('destroy'); $tr.popover(options).popover('show');

非常感谢！在ajax 调用之前添加$tr.popover('destroy'); 就可以了！

【参考方案1】：

您应该使用以下方法销毁现有的弹出框：

$tr.popover('destroy');

然后使用您的代码创建新的弹出框：

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