在bootstrap5中如何通过jquery对许多元素执行popover函数

j9per5c4  于 2023-01-25  发布在  jQuery
关注(0)|答案(1)|浏览(145)

我有一个问题,bootstrap5弹出不能由jquery,总是显示错误

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

我有7元素在我的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>

我在用户类中设置了data-bs-toggle="popover"以使用bootstrap5弹出窗口。我在同一个html页面中有7个类似的元素,因此我将类的每个循环使用为

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

        var popover = new bootstrap.Popover($this, options)
    });
});

但它会产生错误

Uncaught TypeError: POPOVER: Option "content" provided type "undefined"

并且不能弹出所有元素,一些元素弹出但一些元素不能弹出,
为什么会发生这种情况,我需要做单独的类名称?
怎么能解决。

56lgkhnf

56lgkhnf1#

你的代码没有问题。只要确保你包含了引导链接。试试这个

document.addEventListener('DOMContentLoaded', () => {
    Array.from(document.querySelectorAll('.user[data-bs-toggle="popover"]')).forEach(element => {
        const userInfo = element.querySelector('.userInfo');
        if (userInfo) {
            new bootstrap.Popover(element, {
                trigger: 'click , hover',
                placement: 'bottom',
                html: true,
                content: userInfo.innerHTML
            });
        }
    });
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

<div class="col-5 offset-2">
    <div class="user" style="text-align: center; margin: auto;" data-bs-toggle="popover">
        <img src="https://i.imgur.com/9pNffkj.png" alt="**" style="width:100px;">
        John Doe
        <div class="userInfo" data-name="popover-content">
            <div class="panel panel-success" style="text-align: center;">
                <div class="panel-heading">
                    <a href="">
                        <h4>John Doe</h4>
                    </a>
                </div>
                <div class="panel-body">
                    <div>Ad nostrud veniam veniam fugiat sunt</div>
                    <h6>do consequat</h6>
                    <p>culpa irure commodo.</p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-5 offset-2">
    <div class="user" style="text-align: center; margin: auto;" data-bs-toggle="popover">
        <img src="https://i.imgur.com/9pNffkj.png" alt="**" style="width:100px;">
        Jane Doe
        <div class="userInfo" data-name="popover-content">
            <div class="panel panel-success" style="text-align: center;">
                <div class="panel-heading">
                    <a href="">
                        <h4>Jane Doe</h4>
                    </a>
                </div>
                <div class="panel-body">
                    <div>Ad nostrud veniam veniam fugiat sunt</div>
                    <h6>do consequat</h6>
                    <p>culpa irure commodo.</p>
                </div>
            </div>
        </div>
    </div>
</div>

相关问题