У меня действительно простая наценка для домашнего / индексного экрана / страницы для приложения 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 dev bar
Ссылка на пример jsFiddle