Bootstrap 5中Popover的content函数仅被调用一次的问题解决求助

问题描述： #

我有一段创建并初始化多个Bootstrap Popover的代码，希望每次显示Popover时更新文本内容，所以我觉得把content设置为函数会很合适。但这个函数每个Popover只会被调用一次，导致每次显示的都是初始值，不会更新。

// Create popovers
$('img.example-conversion').each(function() {
    new bootstrap.Popover(this, {
        placement: 'right',
        trigger: 'click focus',
        html: true,
        title: 'Quantity Divisor',
        content: getPopoverContent,
    });
})

var count = 1;
function getPopoverContent() {
    return count++;
}

我需要每次显示Popover时都更新文本内容，有没有人知道怎么实现？

解决方案： #

这是Bootstrap Popover的正常设计哦——当你把content设置为函数时，它只会在初始化Popover实例的时候执行一次，用来获取初始内容，之后不会再自动调用这个函数。要实现每次显示都动态更新内容，我们可以利用Popover的show.bs.popover事件（这个事件会在Popover显示之前触发），在事件回调里手动更新内容。

方法一：监听show.bs.popover事件动态更新

var count = 1;
function getPopoverContent() {
    return count++;
}

// 初始化Popover并绑定事件
$('img.example-conversion').each(function() {
    // 创建Popover实例，先设置初始内容
    const popoverInstance = new bootstrap.Popover(this, {
        placement: 'right',
        trigger: 'click focus',
        html: true,
        title: 'Quantity Divisor',
        content: getPopoverContent()
    });

    // 监听显示前的事件，更新内容
    this.addEventListener('show.bs.popover', () => {
        popoverInstance.setContent({ content: getPopoverContent() });
    });
});

方法二：完全通过事件动态设置内容（无需初始值）

如果不需要初始内容，也可以初始化时不设置content，完全在事件中动态生成：

var count = 1;
function getPopoverContent() {
    return count++;
}

$('img.example-conversion').each(function() {
    const popoverInstance = new bootstrap.Popover(this, {
        placement: 'right',
        trigger: 'click focus',
        html: true,
        title: 'Quantity Divisor'
    });

    this.addEventListener('show.bs.popover', () => {
        popoverInstance.setContent({ content: getPopoverContent() });
    });
});

原理说明： #

• show.bs.popover事件会在Popover即将显示时触发，这时候更新内容能确保用户看到的是最新值。
• popoverInstance.setContent()方法是Bootstrap 5提供的官方API，用来动态修改Popover的内容，它接受一个对象，可以同时修改title和content。

这样调整后，每次点击或聚焦显示Popover时，都会重新执行getPopoverContent()函数，内容就会实时更新啦！

备注：内容来源于stack exchange，提问作者Jonathan Wood