Twitter Bootstrap ポップオーバーを使用して「クイック ビュー」効果を作成し、人々がアイテムの上にマウスを置いたときに詳細情報を表示します。ポップオーバーのコンテンツは、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>';
}