jquery - 无法在后续调用中获取 AJAX 数据的维度

Question

我想我要疯了。

我想要做的就是通过 AJAX 获取数据的维度，无论调用多少次。它第一次运行良好，但每次后续调用我总是得到一个 0 值 - 尽管它出现在页面上，正如人们所期望的那样。

// The AJAX part
function getDetails(request){
    $placehold.empty();
    return jQ.get(request);
};

// Filter & render AJAX data
function renderData(data){
    var endResult = $(data).find('#productDetails');
    endResult.fadeTo(0,0).appendTo($placehold);
    $placehold.removeClass('loading');
    endResult.fadeTo(300,1); // <- Added as per request
    // Console log previously uncalled data works fine
    // Called again, I get zero every single time
    console.log( jQ('#anyElementInAJAXData').outerHeight(false) );
};

// Click handler
jQ('#slides').on('click', '.slideLink', function(e){
    e.preventDefault();
    var target = jQ(this).attr("href");
    $placehold.fadeIn(360).addClass('loading');
    getDetails(target)
        .done( function(result) {
            renderData(result);
        })
});

我究竟做错了什么？

Answer 1

您的问题似乎在于 endResult.fadeTo(0,0).appendTo($placehold); 方法。appendTo 只会在fadeTo 完成后发生，但是你的方法的其余部分是在fadeTo 刚刚开始时执行的。这“可能”解决它：

var endResult = $(data).find('#productDetails');
endResult.fadeTo(0,0, function() {
  $(this).appendTo($placehold);
  $placehold.removeClass('loading');
  $(this).fadeTo(300,1); // <- Added as per request
  // Console log previously uncalled data works fine
  // Called again, I get zero every single time
  console.log( jQ('#anyElementInAJAXData').outerHeight(false) );
});