Question

所以我在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太高并且越过可视区域，因为它没有被重新定位在正确的高度之外。希望这是有道理的。代码中是否有我遗漏的东西？谢谢！

Answer 1

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

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

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

Answer 2

默认情况下，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选择器。为了提高代码性能，不止一次缓存选择器总是一个好主意。

脚本不等待ajax返回？

2 个答案: