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包含＆＃34; XXX＆＃34;，但理论上下一行应改变弹出式内容来自＆＃34;获取更多信息.. ＆＃34;到＆＃34;测试更改的内容＆＃34;，它没有。

这是我之前阅读的其中一件事，例如here。

弹出窗口完美无缺，否则，他们只是将内容硬连接到HTML中的数据内容。

我已尝试过pop.options.content =＆＃34;测试更改的内容＆＃34 ;;＆＃39;还

如果有人对此表示赞赏。

编辑：

这似乎是一个时间问题，也就是说，你必须在加载后抓取popover内容。我在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>');         
    }
});

Answer 1

这有效：

y = 'disp' 
x = 'hp'
controls = 'vs + am + gear + carb'

lm(y ~ x + controls, mtcars)

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

bootstrap popover内容更改

2 个答案: