ajax 调用后弹出框不会隐藏，也不会悬停操作

Question

我有一个弹出框，我正在使用这样的 ajax 调用添加内容属性。

$(document).ready(function(){
    $('[data-toggle="popover"]').hover(function() {
        var popover = $(this);
        popover.off('hover');
        getRemoteData(popover);
    });
});

function getRemoteData(popover) {
    $.ajax({
        url: '/comentario/1',
        dataType: 'html',
        success: function (data) {
            popover.attr('data-content', data).popover('show');
        }
    });
}

我的问题是我的弹出框总是被触发，即使我没有悬停，也许我做错了？

也试过这个方法：

$('[data-toggle="popover"]').popover({title: "Header", content: function() { return //return ajax here;}, trigger: "hover"}); 

但我没有得到 ajax 文本，而是得到 [Object Object]

Answer 1

您可以使用 mouseenter 和 mouseleave 事件，而不是使用悬停事件。

$('[data-toggle="popover"]').on("mouseenter", function() {
    var e=$(this);  
    $.ajax({
        url: '/comentario/1',
        dataType: 'html',
        success: function (data) {
            e.popover({content: data}).popover('show'); 
        }
    });
});

$('[data-toggle="popover"]').on("mouseleave", function() {
    var e=$(this);
    $(this).popover('hide'); 
});

它会像悬停一样正常工作。