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',
    });
});

我不知道为什么我需要单击两次并且弹出框不显示任何内容，而挂起的单击根本不起作用，有人可以帮助我吗？

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',
    });
});

Bootstrap Popover无法触发事件，并且内容显示不完整

1 个答案: