jQuery Mobile pierde estilo después de actualizar DOM
Frecuentes
Visto 2,040 equipos
2
Se ha publicado una pregunta similar a esta varias veces, pero no puedo encontrar una solución que funcione. Con suerte, alguien puede ayudar!
Estoy usando jQuery Mobile 1.1 y jQuery 1.7.2, así que estoy en las versiones estables más recientes. Quiero crear un encabezado de página dinámico. Usando este código HTML, funciona bien:
<div data-role="page" id="levela">
<div data-role="header" id="hdr_levela">
<h1>Title</h1>
</div>
</div>
Entonces voy a crear dinámicamente el título. Cambio el HTML a esto:
<div data-role="page" id="levela">
<div data-role="header" id="hdr_levela">
</div>
</div>
Y agregó el siguiente código jQuery:
// Set the header
var dirHeader = $('#hdr_levela');
dirHeader.append('<h1>' + title+ '</h1>');
El título aparece, pero no tiene estilo. He encontrado varios post sobre esto. En la documentación de jQuery Mobile, dice:
"Sin embargo, si genera un nuevo marcado del lado del cliente o carga contenido a través de Ajax y lo inyecta en una página, puede activar el evento de creación para manejar la inicialización automática de todos los complementos contenidos en el nuevo marcado. Esto se puede activar en cualquier elemento (incluso la página div en sí), lo que le ahorra la tarea de inicializar manualmente cada complemento (botón de vista de lista, selección, etc.).
Por ejemplo, si se cargó un bloque de marcado HTML (por ejemplo, un formulario de inicio de sesión) a través de Ajax, active el evento de creación para transformar automáticamente todos los widgets que contiene (entradas y botones en este caso) en las versiones mejoradas. El código para este escenario sería:
$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );
Así que probé varias cosas. Después del código anterior, agregué lo siguiente:
dirHeader.trigger("create");
Esto no tuvo ningún efecto. Así que traté de ponerlo en el apéndice real:
dirHeader.append('<h1>' + folderName + '</h1>').trigger("create");
Esto no tuvo ningún efecto. Luego probé el proceso en el elemento principal (en este caso, la identificación del div principal es "levela"). Así que probé esto:
$('#levela').trigger("create");
Esto tampoco tuvo ningún efecto. En este punto, estoy completamente perdido. Cada solución implica hacer una de las cosas que he intentado y simplemente no funciona. Debo estar perdiendo algo increíblemente básico, pero parece que no puedo encontrarlo.
¡Gracias de antemano por tu ayuda!
2 Respuestas
2
Puede actualizar el contenido llamando .page
:
Ver este violín de trabajo ¡Ejemplo!
// Set the header
var title = 'super hyper BuBu',
$dirHeader = $('#hdr_levela');
$dirHeader.append('<h1>' + title+ '</h1>').page();
Respondido el 12 de junio de 12 a las 21:06
0
Acabo de resolver un problema similar: parece que los encabezados y pies de página de jQM no tienen el método "crear", por lo que puedo decir, las clases y roles CSS deben agregarse manualmente.
Como referencia, publiqué una solución de ejemplo en esta (antigua) pregunta: El comando JQuery Mobile trigger ('crear') no funciona
contestado el 23 de mayo de 17 a las 13:05
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas jquery-mobile or haz tu propia pregunta.
¡Gracias! Pero la solución fue un poco más profunda. Su solución funciona perfectamente en el ejemplo de violín, pero no funcionó para mí. Profundicé un poco más y descubrí que el ejemplo de Fiddle no usa jQuery Mobile 1.1, sino una compilación 1.0. Ese fue el truco: la página () no parece funcionar con 1.1. Cuando bajé la categoría de jQuery Mobile, funcionó muy bien. ¡¡Gracias por tu ayuda!! - user1452076
Yap, no se pudo hacer que Fiddle funcionara con su versión de jQuery Mobile, había asumido un problema de jsFiddle ... Entonces, para preparar un ejemplo, ¡he usado una versión anterior! Me alegro de que al final esto haya resuelto tu problema :) - Zuul