Bootstrap 5 Popover动态设置文本失效，如何排查与解决？

• Bootstrap Popover 必须先完成全局初始化，才能动态修改内容。你在点击事件中才首次调用popover()方法，属于晚初始化，新配置无法覆盖原有HTML属性定义的默认值。
• 重复调用popover()初始化方法无法更新已渲染的Popover内容，需要调用官方提供的内容更新接口。
• 额外异常：你代码中的input元素重复定义了id属性（同时存在id="searchBar"和id="floatingInput2"），会导致DOM选择器匹配异常，建议删除冗余id。

方案1：Bootstrap 5 原生API实现（推荐） #

HTML部分无需修改，仅删除input重复的id即可，JS代码调整为：

$(document).ready(function(){
    // 提前初始化Popover实例
    const searchPopover = new bootstrap.Popover(document.querySelector('#searchPredict'))
    // 点击输入框时动态更新内容
    $('#searchBar').on('click', function() {
        searchPopover.setContent({
            '.popover-header': 'testing123',
            '.popover-body': '自定义动态内容'
        })
    })
});

方案2：兼容Bootstrap 3/4的jQuery写法 #

$(document).ready(function(){
    // 提前初始化Popover
    $('#searchPredict').popover()
    // 点击时修改属性后刷新Popover
    $('#searchBar').on('click', function() {
        $('#searchPredict')
            .attr('data-bs-title', 'testing123')
            .attr('data-bs-content', '自定义动态内容')
            .popover('show')
    })
});

内容的提问来源于stack exchange，提问作者David Murphy