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>';
}
非常感謝,這解決了這個問題。是否也可以只做一次ajax調用?現在,每當我將鼠標懸停在某個項目上時,就會發出ajax調用。是否有可能調整js,因此如果div已經有內容,請不要嘗試再填充它。 – farjam 2013-02-18 15:21:52
@farjam是的,這是可能的。我建議你爲此發佈另一個問題。目前我正在使用手機,但如果您將問題提供給「jquery」標籤,我認爲您應該能夠很快得到答案。 – 2013-02-19 00:31:11
添加了[另一個問題](http://stackoverflow.com/questions/14961207/jquery-making-an-ajax-call-to-be-requested-only-once)。謝謝 – farjam 2013-02-19 15:37:51