jquery margin 不会在第一次点击时适应

Question

如果您单击类“可点击”的元素，则会出现一个 div“显示”。 “显示” div 的高度不相等。 根据这个 div 的高度，另一个 div“容器”的上边距应该适应。 但是，这适用于第一次点击，但不适用于连续点击：从第二次“可点击”开始，始终需要两次点击：第一次点击将加载内容，第二次点击将调整上边距。

$(document).ready(function(){
var display = $("#display");
var clickable = $(".clickable");
display.hide();

clickable.click(function(){
    var clickableid = clickable.attr('id');
    $.ajax({
        cache: false,
        type: 'get',
        url: 'process.php?id=' + clickableid,
        dataType: 'html',
        success: function(content) {
            $('#display').load('process.php?id=' + clickableid);
            display.show(function(){
                var newmargin = $("#display").height();
                $('#container').css({"margin-top": + newmargin});
            });
        }
    });
});

代替：

    display.show(function(){
        var newmargin = $("#display").height();
        $('#container').css({"margin-top": + newmargin});
    });

我也试过了：

    display.show()
    var newmargin = $("#display").height();
    $('#container').css({"margin-top": + newmargin};

不幸的是没有用：只是出现的方式不同。 有人有想法吗？

Answer 1

我无法发表评论，所以我必须提供一个确实不是的答案，但我认为您想查看.done(function( data ){...}) 成功并不一定意味着 DOM 已完成渲染 get 的结果。

这些方法采用一个或多个在 $.ajax() 请求终止时调用的函数参数。这允许您在单个请求上分配多个回调，甚至在请求完成后分配回调。 （如果请求已经完成，则立即触发回调。）

另外，我对调用 .load() 时发出的第二个请求感到困惑，这是一种同步方式，完全符合 $.ajax 请求正在做的事情 (??)

JQuery .ajax() docs

Answer 2

编写 css() 方法的正确方法是不带加号，如下所示：$('#container').css({"margin-top": newmargin};