Question

我的引导程序Popover有问题。它有时可以使用，但有时却没有。当访问者将鼠标悬停在用户名上时，我用它来生成带有用户信息的popover。该页面是由ajax生成的，所以起初我认为它只是一个内容被加载的问题，但问题是它有时会起作用。

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

这是我使用的Javascript。

Answer 1

正如您所发现的那样，问题在于您尝试为已经完成的事物创建新的弹出窗口。隐藏它后删除popover已解决了这个问题。

但是，这应该解决问题而不删除它，并且意味着您每个用户只会获得一次用户信息......

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

它会保留一系列您已获取信息的用户ID，并且只有在您尚未完成信息时才能获取该信息。

Bootstrap Popover不能始终如一地工作

1 个答案: