javascript - online - jQuery Mobile 1.4.5-error al navegar a la página creada dinámicamente
libreria de jquery mobile (1)
Me he estado golpeando la cabeza contra la pared durante unas horas y todavía no puedo hacer que esto funcione.
Estoy haciendo una aplicación web, usando una plantilla de varias páginas (tengo varias páginas en mi index.html .
Objetivo: crear dinámicamente una nueva página, y luego mostrar esta página en la pantalla.
Problema: después de crear la página e intentar cambiar a esta página, aparece el siguiente error: Error: Syntax error, unrecognized expression: :nth-child en jquery.mobile-1.4.5.js:1850:8
El código relevante se puede encontrar a continuación:
JavaScript
// Add the page to the DOM
$.mobile.pageContainer.append(page);
// Change the page
$.mobile.pageContainer.pagecontainer(''change'', $(''#'' + pageId));
HTML
La página ha sido creada y agregada a <body> , por lo que omitiré la parte HTML.
Creo que la página podría no estar registrada en el contenedor de la página, lo que da un error? Lo he buscado, pero no parece haber un método de actualización de contenedor de páginas.
¿Alguna idea sobre cómo solucionar este problema?
Editar 1:
Usando el código mencionado para navegar a otra página, por ejemplo, la página de inicio funciona bien. La única página que no funciona es la página recién creada.
Editar 2:
Parece que la página que creo produce el error. El código que se usó para navegar a la página funcionó correctamente.
El código que uso para crear la página:
var page = $(''<div/>'', {
id: pageId,
''data-role'': ''page'',
''data-dom-cache'': ''false'',
});
var content = $(''<div/>'', {
''data-role'': ''content'',
});
var courseTabs = $(''<div/>'', {
''data-role'': ''tabs'',
});
var courseNavbar = $(''<div/>'', {
''data-role'': ''navbar'',
}).append($(''<ul/>''));
var courseBtn = $(''<a/>'', {
href: ''#'',
class: ''ui-btn'',
text: ''testbutton'',
});
// Glue the page parts together in the page.
courseTabs.append(courseNavbar);
content.append(courseTabs).append(courseBtn);
page.append(content);
// Add the page to the DOM
$.mobile.pageContainer.append(page);
// Navigate to the page
$.mobile.pageContainer.pagecontainer("change", page, {
transition: "flip"
});
El código anterior produce el error.
Creo que este problema debe ser aclarado:
Esto no es un error de jQuery , este es un error de jQuery Mobile . El mensaje de error publicado en la pregunta es incorrecto, porque la biblioteca
jquery.mobile.jsha cambiado de nombre ajquery.js.Al usar el estándar
jquery.mobile-1.4.5.min.jsel mensaje de error es:Error no detectado: error de sintaxis, expresión no reconocida: n-child en jquery.mobile-1.4.5.min.js: 3
pero tenga en cuenta que el número de línea puede variar si se utiliza una descarga personalizada o si se utiliza la versión de depuración.
- Widget afectado: Navbar
Este error tiene menos que ver con la creación de página dinámica, porque también surge en una página estática. Esto se puede probar fácilmente con el siguiente marcado:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="navbar"> <ul> <!-- no <li> here --> </ul> </div> <div data-role="content"> </div> </div> </body> </html>Solución: al menos un
<li>estará dentro de la barra de navegación<ul>.
- Diseñe y pruebe el fragmento HTML final resultante utilizando una página estática de JQM , en Plunker .
Si la plantilla estática funciona , entonces junte las piezas HTML. Me gustaría utilizar una simple concatenación de texto, pero esto es solo una cuestión de estilo de programación personal y preferencia (no lo tomes demasiado en serio) - al menos, si se trata de una plantilla grande, el anidamiento de la etiqueta es inmediatamente claro.
var html = [ ''<div data-role="navbar">'', ''<ul>'', ''<li><a href="''+link1+''" class="ui-btn-active">''+text1+''</a></li>'', ''<li><a href="''+link2+''">''+text2+''</a></li>'', ''</ul>'', ''</div>'' ].join("");Al final, use
append()solo una vez.
Si alguien está interesado, sería bueno escuchar algunos comentarios sobre el rendimiento de los diferentes métodos para la creación de plantillas / fragmentos HTML.
Una nota aparte:la pregunta contenida en el título de esta publicación ya fue respondida por Omar hace mucho tiempo: jquery mobile Inyección dinámica de páginas