CODEWITHSUNDEEP
jquerybootstrap-4
jett chen
jett chen

Reputation: 1173

Bootstrap popover can't trigger event and content show incomplete

I have a link and want when user click it , it will show popover content, but now then conent not show and trigger not work well.

<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>

and the js code is :

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

I don't know why I need to click twice and popover show nothing, and the pending click don't work at all, can anyone help me?

Upvotes: 0

Views: 155

Answers (1)

Mert Aşan
Mert Aşan

Reputation: 436

The popover was expecting a second click because it was in the click function.

You try this.

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

Upvotes: 1

Related Questions