1

所以我在 jquery 中有这个长函数，其中包括 jquery ajax 调用、一些 css 更改和重新定位 div。这是我的代码：

$('.editable').click(function(e) {
    //assign the attributes for the ajax call                         
    $('#employeelist span').html("job: " + $(this).attr("editjob") + "<br />date: " + $(this).attr("editdate").substr(5));
    $('#employeelist').attr("editjob", $(this).attr("editjob"));
    $('#employeelist').attr("editdate", $(this).attr("editdate"));  
    //update the employee list with AJAX
    $.get("getDaySchedule.php", 
        {'job': $('#employeelist').attr("editjob"), 'date': $('#employeelist').attr("editdate")},
        function(responsetext){$('#employeelist ul').html(responsetext);},
        "html"
    );
    //show the employee list
    $('#employeelist').show()
    .css('top',$(this).offset().top+25)
    .css('left',($(this).offset().left+130))
    .css('visibility', "visible")
    .removeClass()
    .addClass($(this).attr('class'));
    //adjust the employee list if it goes outside the viewable area:
    if ($('#employeelist').height() + $('#employeelist').offset().top > $(window).height()) {
        newtop = ($('#employeelist').height() + $('#employeelist').offset().top) - $(window).height();
        newtop = $('#employeelist').offset().top - newtop;
        $('#employeelist').css('top',newtop);
    };
    if ($('#employeelist').width() + $('#employeelist').offset().left > $(window).width()) {
        newleft = $('#employeelist').offset().left - 260;
        $('#employeelist').css('left',newleft);
    };
});

我遇到的问题是，在完成 ajax 调用之前，它似乎正在运行最后一段代码（如果它在可视区域之外，它将重新定位 div）。所以基本上 div 的高度很短，因为它还没有得到响应文本。这会导致 div 太高并超出可视区域，因为它没有重新定位到正确的高度。希望这是有道理的。我在代码中遗漏了什么吗？谢谢！

4

2 回答 2

1

默认情况下，Ajax 是异步的，这意味着一旦调用它，下面的代码就会运行，而无需等待 ajax 调用返回；因此，当您的以下代码运行时，它并不完整。您需要在 ajax 成功内移动您的代码。

$('.editable').click(function(e) {
    var $editable = $(this);
    var $employeeList = $('#employeelist');

    //assign the attributes for the ajax call                         
    $('#employeelist span').html("job: " + $editable.attr("editjob") + "<br />date: " + $editable.attr("editdate").substr(5));
    $employeeList.attr("editjob", $editable.attr("editjob"));
    $employeeList.attr("editdate", $editable.attr("editdate"));  

    //update the employee list with AJAX
    $.get("getDaySchedule.php", 
        {'job': $employeeList.attr("editjob"), 'date': $employeeList.attr("editdate")},
        function(responsetext){
            $('#employeelist ul').html(responsetext);

            //show the employee list
            $employeeList.show()
                .css('top', $editable.offset().top+25)
                .css('left', ($editable.offset().left+130))
                .css('visibility', "visible")
                .removeClass()
                .addClass($editable.attr('class'));

            //adjust the employee list if it goes outside the viewable area:
            if ($employeeList.height() + $employeeList.offset().top > $(window).height()) {
                newtop = ($employeeList.height() + $employeeList.offset().top) - $(window).height();
                newtop = $employeeList.offset().top - newtop;
                $employeeList.css('top',newtop);
            }

            if ($employeeList.width() + $employeeList.offset().left > $(window).width()) {
                newleft = $employeeList.offset().left - 260;
                $employeeList.css('left',newleft);
            }
        }
    );    
});

编辑：

我已更新代码以解决您遇到的问题。注意我还缓存了最常用的 jquery 选择器。多次缓存选择器以提高代码性能总是一个好主意。

于 2012-06-08T22:59:52.370 回答
1

您需要在 AJAX 回调函数中移动重新定位代码，因此您有：

 function(responsetext){$('#employeelist ul').html(responsetext);}

在该函数中，您需要进行所有重新定位。

于 2012-06-08T22:55:14.323 回答