Question

这很奇怪。我有一组jQuery UI选项卡，通过AJAX加载。一旦加载并准备好选项卡的内容，应该触发的加载事件有时会在计算内容的高度之后有时会触发。

情况如下：第一个标签包含两个.resizable() div - 有一条中心线，您可以向左或向右拖动以使一个或另一个面板变大。我能让他们工作的唯一方法就是绝对定位他们。

问题是，因为它们绝对定位，所以包含的div不能自动调整到它们的高度。为了使它们适合内部，我必须首先找到它们的高度（内容是动态的，所以高度可以改变），然后告诉包含div比那个高度高70个像素。这是一个简单的功能：

function setTabHeight() {
    // The problem is only with Tab1, because of the absolute positioning. Any other tab, height can be set automatically.
    if ($("#tabs").tabs('option', 'active') != 0) { $("#tabs").height('auto'); return false; }
    // Tab1 contains two side-by-side divs, which we'll call "east" and "west".
    // This figures out which is taller and makes the containing div taller than that.
    var westDiv = $("#westDiv").height();
    var eastDiv = $("#eastDiv").height();
    if (westDiv > eastDiv) { $("#tabs").height(westDiv + 70); }
    else { $("#tabs").height(eastDiv + 70);
}

我称之为这样的功能：

$(#tabs).tabs({
    load: function (e, ui) {
        [a bunch of other code, mostly the call to .resizable()]
        setTabHeight();
    }
});

除了有时它有效，有时它没有。我可以坐在那里重新加载完全相同的信息，有时它会调整包含div，有时它不会。我将console.log($('#westDiv').height())放在我的加载函数的末尾，并且有时它知道div的高度，有时它认为它的高度为零。

我可以得出的唯一结论是，jQuery UI选项卡的加载事件可以比内部div的高度更快地计算。我可以使用setTimeout(setTabHeight, 10)使其工作，但这看起来非常引人注目，而且我担心如果我的任意数量的十毫秒证明是错误的，那么较慢的计算机上的用户可能仍会遇到麻烦。 / p>

有关更通用解决方案的任何想法 - 特别是，只有在元素高度之后才启动函数的方法？

Answer 1

我认为您可以使用jQuery.Deferred解决此问题。

这样的事情：

function getDivHeight(strDivId) {
    var def = $.Deferred(), $div = $("#" + strDivId);

    setInterval(function () {
        var intDivHeight = $div.height();

        if (intDivHeight > 0) {
            def.resolve(intDivHeight);
        }
    }, 40);

    return def.promise();
}


$.when(getDivHeight("westDiv")).then(function (divHeight) {
    // Do something with the westDiv's height here.
});

它并不多，您需要一些额外的逻辑才能使其适合您的具体情况，但我认为这可能是您制定有效解决方案的正确方向。

jQuery UI标签加载事件有时似乎过早发生

1 个答案: