jQuery：.height（）在.ready（）中返回null，但它在运行相同的代码控制台时有效

Question

我正在尝试将高度分配给主div容器，以仅将滚动条提供给此＆＃34; rightContent ＆＃34;格。

我正在做的就是找到所有其他DIV的高度，并使用＆＃34; window＆＃34;减去这些DIV的高度。高度，给主要div的高度＆＃34; rightContent ＆＃34;

但是我遇到了一个问题，我得到了所有＆＃34; DIVs＆＃34;除了＆＃34; .tabstripContainer ＆＃34; div，它是一个动态DIV，它在运行时生成。

我在＆＃34; .ready（）＆＃34;的页面末尾添加了以下代码，但是当我运行代码时，它返回＆＃34; null＆＃34;对于＆＃34; tabstripContainer = $('.tabstripContainer').outerHeight(); ＆＃34;

以下是运行代码时的输出：

=============================================== ============

但是当我在浏览器控制台中运行代码时，我得到的正确值为＆＃34; tabstripContainer = $('.tabstripContainer').outerHeight(); ＆＃34;也＆＃34;

以下是我在浏览器控制台中运行代码时的输出：

=============================================== ===================== 这是我的代码：

$(document).ready(function() {
    // -----------------------------------------------------
    // 100% height fill for splitter main window and panes [Master layout]
    // -----------------------------------------------------
    var bHeight = $('body').height(),
        wHeight = $(window).height(),
        headerHeight = $('header').outerHeight(),
        blueHeader = $('.blueHeader').outerHeight(),
        greyHeader = $('.greyHeader').outerHeight(),
        tabstripContainer = $('.tabstripContainer').outerHeight();

    changepush();
    $(window).resize(function() {
        wHeight = $(window).height();
        changepush();
    });

    function changepush() {
        if (wHeight >= bHeight) {
            var rightContent = wHeight - headerHeight - blueHeader - greyHeader - tabstripContainer;
            $('.rightContent').height(rightContent);

            alert("bHeight" + " > " + bHeight + " wHeight" + " > " + wHeight + " headerHeight" + " > " + headerHeight + " blueHeader" + " > " + blueHeader + " greyHeader" + " > " + greyHeader + " tabstripContainer" + " > " + tabstripContainer + " rightContent" + " > " + rightContent);
        }
    }
});

请建议！

Answer 1

我没有足够的声誉来评论，所以不得不提供这个答案。

您是否尝试使用$（window）.load而不是$（document）.ready？前者在加载其他页面资源时触发（例如图像），而后者将在DOM准备就绪时触发。

Answer 2

如果您在运行时创建内容，则需要等到这种情况发生。 在浏览器完成解析所有DOM之后，document.ready被触发，但之前其他脚本（如ajax调用等）。

一种可能的解决方案是使用change push() 推迟 setTimeout来电，或者在显示内容后调用该功能。

另一种解决方案是在加载div内容后触发自己的事件（即“contentLoaded”）。

您可以尝试使用window.load代替document.ready，这是在完成所有外部请求后触发的事件（imgs，frames等）。

setTimeout参考：https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

jQuery自定义事件：https://learn.jquery.com/events/introduction-to-custom-events/