Bootstrap5中使用jQuery实现多元素Popover报错问题求助

问题 #

在使用jQuery实现Bootstrap5 Popover时，持续出现以下错误：

Uncaught TypeError: POPOVER: Option "content" provided type "undefined" but expected type "(null|string|element|function)".

页面内有7个结构相似的.user元素，均已添加data-bs-toggle="popover"属性，HTML结构示例如下：

<div class="col-5 offset-2">
    <div class="user" style="text-align: center; margin: auto;" data-bs-toggle="popover">
        @if($tlr->paid_status == 0)
        <img src="{{asset('assets/user/user.png')}}", alt="**" style="width:100%;">
        @else
        <img src="{{asset('assets/user/paid_user.png')}}", alt="**" style="width:100%;">
        @endif
        {{$tlr->username}}
        <div class="userInfo" data-name="popover-content">
            <div class="panel panel-success" style="text-align: center;">
                <div class="panel-heading">
                    <a href="{{url('tree/'. $tlr->username)}}">
                        <h4>{{$tlr->username}}</h4>
                    </a>
                </div>
                <div class="panel-body">
                    <?php
                        echo "<h5>".strtoupper("$tlr->first_name $tlr->last_name")." </h5> $paid";
                        printBV($tlr->id);
                        printBelowMember($tlr->id);
                    ?>
                </div>
            </div>
        </div>
    </div>
</div>

初始化Popover的jQuery代码：

$(document).ready(function() {
    $('.user').each(function() {
        var $this = $(this);
        var options = {
            trigger: 'click , hover',
            placement: 'bottom',
            html: true,
            content: $this.find('.userInfo').html()
        }
        var popover = new bootstrap.Popover($this, options)
    });
});

目前部分元素能正常显示Popover，部分无法显示，想明确问题原因、是否需要区分类命名及解决办法。

问题原因 #

1. 部分.user元素缺失.userInfo子元素：报错提示content为undefined，说明循环到某个.user时，$this.find('.userInfo')未找到对应元素，调用.html()返回undefined，不符合Bootstrap Popover对content参数的类型要求。
2. 重复初始化冲突：已给.user添加data-bs-toggle="popover"属性，Bootstrap会自动尝试初始化这些元素，再通过JS手动初始化会导致重复初始化，引发异常。

解决方法 #

方法一：确保元素完整性并避免重复初始化 #

• 检查后端渲染逻辑，确认所有.user元素内部都正确生成.userInfo容器；若部分用户无需Popover，给这些.user添加额外类（如.no-popover），初始化时排除。
• 移除.user上的data-bs-toggle="popover"属性，防止Bootstrap自动初始化冲突。

修改后的JS代码：

$(document).ready(function() {
    $('.user:not(.no-popover)').each(function() {
        var $this = $(this);
        var userInfo = $this.find('.userInfo');
        // 先判断是否找到元素，避免返回undefined
        if (userInfo.length > 0) {
            var options = {
                trigger: 'click, hover', // 去掉空格，避免触发事件识别错误
                placement: 'bottom',
                html: true,
                content: userInfo.html()
            }
            new bootstrap.Popover($this, options);
        }
    });
});

方法二：用函数动态处理内容 #

利用Bootstrap Popover的content支持函数的特性，动态获取内容并自动处理缺失情况，同时移除data-bs-toggle="popover"属性：

$(document).ready(function() {
    $('.user').each(function() {
        var $this = $(this);
        var options = {
            trigger: 'click, hover',
            placement: 'bottom',
            html: true,
            content: function() {
                // 找不到内容时返回空字符串，符合参数类型要求
                return $this.find('.userInfo').html() || '';
            }
        }
        new bootstrap.Popover($this, options);
    });
});

额外优化 #

• 将trigger: 'click , hover'中的空格去掉，改为'click, hover'，避免Bootstrap对触发事件的识别出错。
• 若.userInfo内容无需保留在原DOM中，可在初始化后隐藏：userInfo.hide();

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