javascript - jQueryMobile 显示错误的 height() 值

Question

我有一个非常简单的 jQM 应用程序主页/索引屏幕/页面标记:

<div id="home" class="container" data-role="page">
    <div class="grid-quarter">
        <a class="ui-link">
            <span class="grid-icon-container">
                <span class="grid-icon icon-lock"></span>
                <span class="grid-icon-text">LABEL TEXT</span>
            </span>
        </a>
    </div>
    <!-- 3 x the same -->
</div>

问题

现在它在 jsFiddle 上运行良好，但是一旦我在我的 jQM 应用程序中抛出完全相同的代码，js .height() 函数(以及其他所有尝试获取高度的元素)失败。

我编写了一个函数来检查每一位是否有机会确定高度并使用 jQM 失败。即使我试图直接从 DOM 对象获取它，它也会失败。甚至当我看到 DOM 对象具有精确的高度设置时。有趣的是:.width() 得到正确的输出。

我不知道从哪里开始调试这个问题。任何帮助表示赞赏。谢谢。

---

测试代码

// Trigger on Load and Resize 
$( '#home' ).on( 
     'pageinit'
    ,function( event )
    {
        fitIconFont( '.icon-font' );
    }
);
// Fit on Window size change
$( window ).resize( function()
{
    fitIconFont( '.icon-font' );
} );

function fitIconFont( class_name )
{
    // DEBUG
    jQuery( class_name ).each( function( index, element ) 
    {
            // WORKS:
        $( this ).on( 'click', function () 
        {
            console.log( $( this ).height() );
        } );
        console.log( $( element ).css('width') );
        console.log( $( element ).width() );

            // FAILS with 20px as output
        console.log( $( element ).css('height') );
        console.log( $( element ).height() );
        console.log( element.scrollHeight );
        console.log( element.offsetHeight );
        console.log( element.clientHeight );
        console.log( element );

        console.log( $( this ).height() );
        console.log( $( this ).css('height') );
        console.log( this.scrollHeight );
        console.log( this.offsetHeight );
        console.log( this.clientHeight );
        console.log( this );
    } );
}

Chrome 开发栏截图

Link to jsFiddle example

Answer 1

当您在 JSFiddle 中运行此代码时，您可能没有弄乱左侧关于何时加载 JavaScript 的设置(位于框架选择下拉列表的正上方)。默认情况下，它设置为 onLoad，这相当于 $(window).on('load', ...)。当 window.load 触发时，所有 Assets 都将被加载并正确设置样式，以便您可以获得准确的高度。

它在 click 事件处理程序中工作，因为页面上的所有资源都已加载，您可以获得准确的读数。 width 可能被正确报告，因为它在页面完全加载后不会改变，这是通常发生的情况，因为 block 级元素默认占用 100% 的宽度。

我尝试在 JSFiddle 中使用 no wrap (body) 设置，以便代码在我通常放置代码的位置(文档底部)同时运行。