Bootstrap Popover无法持续工作

Bootstrap Popover not working consistently

本文关键字：工作 Popover Bootstrap      更新时间：2023-09-26

我的引导程序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。

正如您所发现的，问题在于您试图为某个已经完成的东西创建一个新的popover。在隐藏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数组，这些用户id已经为您获取了信息，并且只有在您还没有这样做的情况下才会获取信息。

相关文章：