Bootstrap Popover 使用 ajax 失败

Question

我想使用带有 ajax 模板的 Bootstrap Popover。下一个脚本运行良好，...

$('.popover-trigger').bind('click', function(k) {

                var e=$(this);
title="Jeepieee"
                $.get('/popover/'+e.data('pophtml'),function(d) {
                    e.popover({
                          content: d,
                          container: 'body',
                          title: title,
                          html: true
                        }).popover('show');
                });
});

...但是，如果我通过第一次发送 ajaxcall 打开弹出框，这是正确的。我再次打开弹出框，它向我展示了我的 html，但弹出框中的 html 是旧的，而不是 ajax-call..

当我使用 $().popover('destroy') 时，我的按钮上没有点击事件，它什么也不会打开。

如果我有多个，情况会更糟。

Answer 1

通过 AJAX 在 Bootstrap popover 中加载内容是一种非常常见的模式，虽然 Bootstrap 不支持开箱即用，但使用 jQuery 很容易获得此功能。

首先我们应该为你想要的元素添加一个 data-poload 属性 喜欢添加一个弹出窗口。该属性的内容应该是 要加载的url（绝对或相对）：

<a href="#" title="blabla" data-poload="/test.php">blabla</a>

在 JavaScript 中，最好是在 $(document).ready();

$('*[data-poload]').hover(function() {
    var e=$(this);
    e.off('hover');
    $.get(e.data('poload'),function(d) {
        e.popover({content: d}).popover('show');
    });
});

off('hover') 防止多次加载数据，popover() 绑定 一个新的悬停事件。如果您希望在每次悬停时刷新数据 事件，你应该删除关闭。

请查看示例的工作JSFiddle。