Question

我正在使用Twitter Bootstrap popovers创建“Quick View”效果，以便在人们将鼠标悬停在某个项目上时显示更多信息。弹出窗口的内容来自Ajax调用。

下面的代码在第一次悬停时工作正常;但是，在随后的鼠标移动中，弹出窗口消失得太快，并且不允许您查看内容。

有人能弄明白问题是什么吗？

$(document).ready(function(){
    //Quick view boxes
    var overPopup = false;

    $("a[rel=popover]", '.favorites').popover({
        trigger: 'manual',
        placement: 'bottom',
        html: true,
        content: function(){
            var div_id =  "div-id-" + $.now();
            return details_in_popup(div_id, $(this).data('product-id'));
        }

    }).mouseover(function (e) {
        // when hovering over an element which has a popover, hide
        // them all except the current one being hovered upon
        $('[rel=popover]').not('#' + $(this).data('unique')).popover('hide');
        var $popover = $(this);
        $popover.popover('show');

        $popover.data('popover').tip().mouseenter(function () {
            overPopup = true;
        }).mouseleave(function () {
            overPopup = false;
            $popover.popover('hide');
        });

    }).mouseout(function (e) {
        // on mouse out of button, close the related popover
        // in 200 milliseconds if you're not hovering over the popover
        var $popover = $(this);
        setTimeout(function () {
            if (!overPopup) {
                 $popover.popover('hide');
            }
        }, 200);
    });
});

function details_in_popup(div_id, product_id){
    $.ajax({
        url: 'index.php?route=product/product/get_product_ajax',
        type: 'post',
        data: 'product_id=' + product_id,
        dataType: 'json',
        success: function(json){
            if (json['success']) {
                $('#' + div_id).html(json['success']);
            }

        }
    });
    return '<div id="'+ div_id +'">Loading...</div>';
}

Answer 1

将.not('#' + $(this).data('unique'))更改为.not('[data-unique="' + $(this).data('unique') + '"]')可解决问题。

我不确定为什么会出现此问题，但我知道如果从等式中删除“bootstrap-transition.js”，问题也会消失。

Twitter Bootstrap popovers消失得太快了

1 个答案: