Bootstrap Popover not working consistently

Question

I have a problem with the bootstrap Popover. It works sometime but other times it doesn't. I use it to generate a popover with a users information when a visitor hovers over the users name. The page is generated by ajax so at first I thought that it simply was an issue of content being loaded after but the issue is that it works sometimes.

$(document).on('mouseenter', '.postusername', function(e){
    var userid = this.parentElement.parentElement.children[0].innerHTML;
    var te = this;
    if(userid)
    {
        $.get('/Requests/getuinfo.php', {id : userid})
        .done(function(data){
            var uinfo = JSON.parse(data);
            boo = uinfo;
            $(te).popover({
                html : true,
                template : '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>',
                content : '<div class="popover-holder" style="background-image:url(\'/Style/Media/CoverPics/' + uinfo.coverpic + '\');">' + uinfo.name 
                + '</div>',
                placement: 'auto'
            });
            $(te).popover('show');
        });
    }
});

$(document).on('mouseleave', '.postusername', function(e){
    $(this).popover('hide');
});

That is the Javascript I used.

Answer 1

As you've found, the problem was the fact that you were trying to create a new popover for something when it had already been done. Removing the popover after hiding it has fixed that problem.

However, this should fix the problem without removing it, and will mean you will also only get user information once per user...

var userids = [];

$(document).on('mouseenter', '.postusername', function(e){
    var userid = this.parentElement.parentElement.children[0].innerHTML;
    var te = this;
    if(userid)
    {
        if (userids.indexOf(userid) === -1) {
            $.get('/Requests/getuinfo.php', {id : userid})
            .done(function(data){
                var uinfo = JSON.parse(data);
                boo = uinfo;
                $(te).popover({
                    html : true,
                    template : '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>',
                    content : '<div class="popover-holder" style="background-image:url(\'/Style/Media/CoverPics/' + uinfo.coverpic + '\');">' + uinfo.name 
                    + '</div>',
                    placement: 'auto'
                });
                $(te).popover('show');
                userids.push(userid);
            });
        }
        else {
            $(te).popover('show');
        }
    }
});

$(document).on('mouseleave', '.postusername', function(e){
    $(this).popover('hide');
});

It keeps an array of the user ids that you've got info for, and only gets the info if you've not already done it.