Bootstrap popover：更改动态创建的元素上的popover的内容

Question

我在静态元素上使用了这个弹出窗口脚本，效果很好：

$(".popover-class").popover({
        title: fetchTitle,
        content: 'loading...', 
        html: true,
        placement: 'right'
    }).on('shown.bs.popover', function () {
        var popover = $(this).attr('data-content', fetchData).data('bs.popover');
        popover.setContent();
        popover.$tip.addClass(popover.options.placement);
});

其中“fetchData”是一个在脚本上调用 ajax 请求的函数，该脚本从 mysql 检索一些数据。

在另一个页面中我想做同样的事情，但是是在动态生成的元素上。我明白我必须从“body”中调用弹出窗口，但是“.attr('data-content'”不再起作用，我不明白为什么。

这是非工作脚本：

$("body").popover({
        title: fetchTitle,
        content: 'loading...',
        container: 'body',
        html: true,
        placement: 'right',
        trigger: "hover",
        selector: '.popover_ajax'
    }).on('shown.bs.popover', function () {
        console.log('test'); // <- this is working 
        var popover = $(this).attr('data-content', 'new text').data('bs.popover');
        popover.setContent();
        popover.update();
        // <-- all this is not working, the popover remain with text "loading.."

    });

弹出窗口正在生成，但它保留文本“正在加载..”，它不会改变。 我错过了什么吗？对于“身体”，也许有些东西应该被不同地称呼？

Answer 1

您正在尝试使用

this

从 body 元素获取属性。

$("body").popover({
    title: fetchTitle,
    content: 'loading...',
    container: 'body',
    html: true,
    placement: 'right',
    trigger: "hover",
    selector: '.popover_ajax'
}).on('shown.bs.popover', function () {
    var popover = $(event.target).attr('data-content', 'new text').data('bs.popover');
    popover.setContent();
    popover.update();

});

Answer 2

$('.popover_ajax')

将匹配页面上的所有元素，您只想匹配被单击的元素。事件处理程序将接收事件作为参数，您可以从中找到事件目标：

.on('shown.bs.popover', function (event) { 
    var popover = $(event.target).attr('data-content', 'new text')... 

Answer 3

尝试这样的方法，它适用于我的场景：

$("body").popover({
    title: fetchTitle,
    content: 'loading...',
    container: 'body',
    html: true,
    placement: 'right',
    trigger: "hover",
    selector: '.popover_ajax'
}).on('show.bs.popover', async (e)=>{
   const popover = bootstrap.Popover.getInstance(e.target);
   let newContent = await fetchData();
   popover._config.content = newContent;
});

popover._config.content

是这里的关键。