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);
});