jquery - Bootstrap popover 无法触发事件且内容显示不完整

Question

我有一个链接，希望当用户单击它时，它会显示弹出内容，但现在内容不显示并且触发器无法正常工作。

<div> 
    <a  class="user-info" href="#"><img src="a.png">username</a>
    <div class="row d-none">
        <div class="border border-success card col-4">
            <div class="card-header">username</div>
            <div class="card-body">
                <div class="clearfix">
                    <img src="a.png"  class="float-left">
                    <span class="text-muted">Hello</span>
                </div>
                <div class="font-weight-bold my-3"> <span>关注者：0</span> <span>文章：0</span></div>
                <a class="card-link btn btn-outline-primary btn-sm pending" href="#">关注</a>
                <a class="card-link btn btn-outline-primary btn-sm" href="#">查看</a>
            </div>
        </div>
    </div>
</div>

js代码是：

 $('.pending').on('click', function (event) {
                event.preventDefault();
                console.log('cc');
            });

$('.user-info').click(function (event) {
    event.preventDefault();
    var usercard = $(this).next().clone(true);
    $(this).popover({
        html: true,
        content: usercard.removeClass('d-none'),
        trigger: 'click',
    });
});

我不知道为什么我需要单击两次并且弹出框什么也没有显示，而待处理的单击根本不起作用，有人可以帮助我吗？

标签： jquerybootstrap-4

Answer 1

弹出框期待第二次点击，因为它在点击功能中。

你试试这个。

 $(document).ready(function(){
    var link = $('.user-info');

    link.click(function (event) {
       event.preventDefault();
    });
    var usercard = link.next().clone();
    link.popover({
        html: true,
        content: usercard.removeClass('d-none'),
        trigger: 'click',
    });
});