jQuery Mobile Beta: ya no se puede usar $ (”)?

Solía ​​ser capaz de conseguir

$('[data-role=header]').first().height() 

en alfa con jQuery 1.5.2, pero ya no puede en beta con jQuery 1.6.1. ¿Ha cambiado algo?

Código completo: esto escribe 0 en console.log …

    Page Title      $(document).ready(function() { console.log($('[data-role=header]').first().height()); });    

Header

//lots of code

Sin embargo, cambie esto a jQuery 1.5.2 y jQuery Mobile alpha:

   

y escribe la altura distinta de cero del encabezado div.

Por cierto, también es distinto de cero con jQuery 1.6.1 pero sin jQuery Mobile. Así que es algo que ver con el renderizado de jQuery Mobile.

No puedo ver nada en las notas de la versión para sugerir lo que podría haber ocurrido, pero no soy un experto en jQuery.

Parece que cambiaron algo de la syntax, Docs:

Cuando encuentre elementos por su atributo de datos de jQuery Mobile, use el selector personalizado: jqmData (), ya que incorpora automáticamente atributos de datos con espacios de nombre en la búsqueda cuando están en uso. Por ejemplo, en lugar de llamar a $ (“div [data-role = ‘page’]”), debe usar $ (“div: jqmData (role = ‘page’)”), que se asigna internamente a $ (“div [ data – “+ $ .mobile.ns +” role = ‘page’] “) sin obligarte a concatenar un espacio de nombres en tus selectores manualmente.

Prueba esto:

 $("div:jqmData(role='header')").first().height() 

El cambio que está causando la diferencia es “Clases de ayuda de diseño receptivo: ahora en desuso”

Incluimos un conjunto de clases de ayuda de diseño receptivo diseñadas para facilitar la creación de un diseño receptivo que adapta el diseño para varios anchos de pantalla. En ese momento, optamos por un sistema de clases de ancho mínimo y máximo de ancho agregadas dinámicamente en el cuerpo que se actualizan en los eventos de carga, cambio de tamaño y cambio de orientación como una solución para la limitación de que Internet Explorer no admite consultas de medios.

Básicamente, la página está ajustando min-height a la min-height de la página actual en la versión beta que está anulando el .landscape { min-height: 300px; } .landscape { min-height: 300px; } en el alfa.

Parece que necesitas usar Consultas de Medios CSS si quieres un diseño de página que cambie o simplemente puedes agregar el style="height:43px" CSS style="height:43px" en el encabezado si necesitas una altura fija.

Parece que la página no está lista cuando consulta la height() . No hay document.ready para jQuery.mobile . No explica por qué hay una diferencia entre alfa y beta, pero supongo que una ruta de código cambió que expuso el problema.

Envolviendo la consulta en un evento diferente, devuelve la altura como se esperaba.

 $("div:jqmData(role='page')").live('pageshow',function(){ console.log($('[data-role=header]').first().height()); }); 

Encontré esto al examinar la altura de desplazamiento del elemento DOM en la consola de Chrome que no era cero, pero, como informaste, la height() siempre reportaba 0. Luego creé un enlace cuando hice clic para mostrar la altura y no estaba cero. Entonces me di cuenta de que se estaba llamando a height() antes de que la página estuviera completamente lista.

Relevante – jQuery mobile $ (documento). Equivalente equivalente