Question

我有一个弹出窗口，并且正在使用这样的ajax调用添加content属性。

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

它的行为就像悬停并正常工作。

弹出窗口不会在ajax调用后隐藏并且不会悬停动作

1 个答案: