javascript - Bootstrap Popover 因 ajax 失败

Question

我想将 Bootstrap Popover 与 ajax 模板一起使用。下一个脚本运行良好，...

$('.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 调用..

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

如果我有多个，会让事情变得更糟。

Answer 1

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

First we should add a data-poload attribute to the elements you would like to add a pop over to. The content of this attribute should be the url to be loaded (absolute or relative):

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

And in JavaScript, preferably in a $(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') prevents loading data more than once and popover() binds a new hover event. If you want the data to be refreshed at every hover event, you should remove the off.

Please see the working JSFiddle of the example.