2013-02-15 95 views
0

我使用Twitter Bootstrap彈出窗口來創建「快速查看」效果,以便在用戶將鼠標懸停在項目上時顯示更多信息。 popover的內容來自Ajax調用。Twitter Bootstrap彈出消失太快

下面的代碼在第一次懸停時工作正常;但是,在隨後的鼠標懸停時,彈出窗口消失太快,不會讓您查看內容。

有人可以找出問題可能是什麼?

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

回答

1

更改.not('#' + $(this).data('unique'))到​​解決問題。

我不完全確定爲什麼存在這個問題,但我知道如果從等式中刪除「bootstrap-transition.js」,問題也會消失。

+0

非常感謝,這解決了這個問題。是否也可以只做一次ajax調用?現在,每當我將鼠標懸停在某個項目上時,就會發出ajax調用。是否有可能調整js,因此如果div已經有內容,請不要嘗試再填充它。 – farjam 2013-02-18 15:21:52

+0

@farjam是的,這是可能的。我建議你爲此發佈另一個問題。目前我正在使用手機,但如果您將問題提供給「jquery」標籤,我認爲您應該能夠很快得到答案。 – 2013-02-19 00:31:11

+0

添加了[另一個問題](http://stackoverflow.com/questions/14961207/jquery-making-an-ajax-call-to-be-requested-only-once)。謝謝 – farjam 2013-02-19 15:37:51