bootstrap popover内容更改

Question

我正在尝试根据其他地方某个div的内容更改bootstrap popovers的数据内容。

在HTML中，我的popover触发器如下所示：

     <div id="box1"
        class="text-success" data-container="body"
        data-html="true"
        data-trigger="click"
        data-toggle="popover" data-placement="bottom"
        data-content="Get more info at <a href='http://example.com'>this link</a>."<br>
        <div id="box1Label" title="Click for more">Another Label</div>
        </div>

我像这样调用popovers（JQuery）：

var pop = $('[data-toggle="popover"]'); 
    $(pop).popover();
    $(pop).on('click', function (e) {
    $(pop).not(this).popover('hide');
    if ($('#panel2Head').html()== 'XXX') {
    alert('okay yes panel2Head html is XXX');
    popover.options.content = "Test Changed Content";
    }   
});

警报确认它正在读取＃panel2Head并且＃panel2Head包含“XXX”，但理论上下一行应该将弹出窗口内容从“获取更多信息...”更改为“测试更改内容”，但事实并非如此。

这是我读过的其中一件事，例如这里 。

这些popovers工作得非常好，他们只是将这些内容硬连接到HTML中的数据内容中。

我试过'pop.options.content =“Test Changed Content”;' 也

如果有人有很多赞赏的建议。

编辑：

这似乎是一个时间问题，也就是说，你必须在加载后抓取popover内容。 我在这里的第二个答案中找到了一个解决方案，我们提出了一些修改，它有效：

var pop = $('[data-toggle="popover"]'); 
$(pop).popover();
$(pop).on('click', function (e) {
    $(pop).not(this).popover('hide');

});
$(pop).on('shown.bs.popover', function(e) {
    if ($('#panel2Head').html()== 'XXX') {
        var id = $(e.target).attr('aria-describedby');
        $('#'+id).html('<p><b>My New Popover Content</b></p>');         
    }
});

Answer 1

这有效：

$(pop).on('shown.bs.popover', function(e) {
if ($('#panel2Head').html()== 'XXX') {
    var id = $(e.target).attr('aria-describedby');
    $('#'+id).html('<p><b>My New Popover Content</b></p>');         
  }
});

Answer 2

如果要更改某些数据，可以查看https://stackoverflow.com/a/44475697/1622945 （带模板选项）。

如果你想在popover中加载html页面，你可以试试这个：

var hoverTimeout;

$('[data-toggle="popover"]').hover(function() {
    var _this = $(this);

    hoverTimeout = setTimeout(function() {
        $.ajax({
            url: url,
            type: 'GET',
            dataType: 'html',
            success: function(dialog) {
                if($(".popover:hover").length != 0) {
                    $(".profile").popover("destroy");
                }
                _this.popover({
                    container: 'body',
                    placement: 'auto',
                    trigger: 'manual',
                    html: true,
                    content: dialog
                }).on("mouseout", function () {
                    setTimeout(function () {
                        if(!$(".popover:hover").length) {
                            $(".popover").popover("destroy");
                        }
                    }, 300);
                });
                _this.popover('show');
                setTimeout(function() {
                    $('.popover-content').on("mouseleave", function () {
                        $(".popover").popover("destroy");
                    });
                }, 300);
            },
        });
    }, 300);
}, function() {
    clearTimeout(hoverTimeout);
});