引导弹出框内容更改答案

【问题标题】：bootstrap popover content change引导弹出框内容更改
【发布时间】：2017-09-14 13:51:53
【问题描述】：

我正在尝试根据其他地方某个 div 的内容来更改引导弹出框的数据内容。

在 HTML 中，我的弹出框触发器如下所示：

     <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>

我这样称呼弹出框（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”，但理论上下一行应该将弹出框内容从“获取更多信息...”更改为“测试更改的内容”，但它并没有不。

这是我读过的东西之一，例如here。

其他情况下，弹出框工作得很好，它们只是总是将内容硬连接到 HTML 中的数据内容中。

我试过 'pop.options.content = "Test Changed Content";'还有

如果有人有建议，非常感谢。

编辑：

这似乎是一个时间问题，即您必须在加载后抓取弹出内容。我在second answer here 中找到了一个解决方案，经过一些修改，我们想出了这个可行的方法：

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

【问题讨论】：

标签： jquery twitter-bootstrap-3

【解决方案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>');         
  }
});

【讨论】：

【解决方案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);
});

【讨论】：