多次鼠标悬停和AJAX调用

时间:2012-04-02 15:46:22

标签: jquery ajax

我正在创建一个jQuery弹出窗口,当用鼠标悬停在用户名上时,用AJAX显示用户信息。它有效,但只是第一次。如果我将鼠标移出并弹出消失,然后再次悬停在用户名上,则弹出窗口是空白的(似乎AJAX调用不会重复多次)。

有人可以说明原因吗?

编辑:新清理的代码(问题仍未解决,只是让代码更容易理解):

$(function(){
var hideDelay = 300;
var currentID = 0;
var hideTimer = null;
var container = $('<div id="personPopupContainer">' + '</div>');

var displayPopup = function(){
    currentID = $(this).attr('rel');

    if (hideTimer != null) {
        clearTimeout(hideTimer);
    }

    var position = $(this).offset();
    container.css({
        left: position.left + 90 + 'px',
        top: position.top + 15 + 'px'
    });

    $.ajax({
        type: 'GET',
        url: '/process.cfm',
        data: 'id=' + currentID,
        success: function(data){
            $('#personPopupContainer').html(data);

            if ($(data).find('#personPopupResult').length) {
                var text = $(data).find('#personPopupResult').html();
                $('#personPopupContainer').html(text);
            }
        }
    });

    container.css('display', 'block');
}

var hidePopup = function(){
    if (hideTimer) {
        clearTimeout(hideTimer);
    }

    hideTimer = setTimeout(function(){
        container.css('display', 'none');
    }, hideDelay);
}

var allowPopupMouseover = function() {
    if (hideTimer) {
        clearTimeout(hideTimer);
    }
}

$('body').append(container);
$('.personPopupTrigger').live('mouseover', displayPopup);
$('.personPopupTrigger').live('mouseout', hidePopup);
$('#personPopupContainer').mouseover(allowPopupMouseover);
$('#personPopupContainer').mouseout(hidePopup);

});

0 个答案:

没有答案