Duplicar posibles:
Dynamically adding collapsible elementsActualizar una sección después de la adición de HTML de forma dinámica a jQuery Mobile
que he visto unos pocos puestos en esto, pero ninguno de ellos parece realmente a aplicar o Podría estar leyéndolo mal. Tengo algo de HTML que me proporciona un servidor que realmente no puedo modificar. Lo que quiero hacer es, tomar ese HTML, insertarlo en un elemento div &, tener jQuery mobile, hacer lo de diseñar. Es posible que necesite hacer eso varias veces, y ahí es donde ocurre el dolor.
Cuando lo inserto por primera vez, todo está bien, jqm toma los estilos de adición & perfectamente. Si lo intento por segunda vez, jqm no lo recoge en absoluto. Intenté hacer una 'plantilla' que copiara y modificara o simplemente insertara html estático &.
Tengo un caso de prueba a continuación, como verá, haga clic en agregar nueva lista una vez, y está bien, haga clic de nuevo & obtendrá una selección sin estilo. He leído en alguna parte que el uso del evento en vivo puede funcionar, pero eso tampoco funciona en este caso.
Además, conozco el método de selección de la lista de selección en jQuery móvil, pero el elemento que recibo puede ser listas de selección simples/múltiples, un grupo de botones de opción o incluso un conjunto de campos de texto libre. Como puede ver, también intenté ejecutar el método de página en el elemento superior, también intenté ejecutar la página en el elemento que voy a agregar, todo en vano. :(
prueba:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>List insert test</title>
<meta http-equiv="Pragma" content="no-cache" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<!-- include jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
<!-- include jQuery Mobile Framework -->
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.css" />
</head>
<body>
<div data-role="page" data-theme="b" id="Dashboard">
<button id='addlist'>add new list</button>
<button id='addips'>add templated list</button>
<button id='clearall'>clear</button>
<div id='theplace'></div>
<div id='newtemp'>
<select id='thelisttemplate'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div id="thelist">
jkghjkgh
</div>
</div>
</body>
<script type="text/javascript">
$('#addips').live('click', (function() {
l = $('#thelisttemplate').clone()
$('#thelist').html('')
$('#thelist').append($(l))
$('#thelist').page()
}))
$('#addlist').click(function() {
l = $("<select id='thelisttemplate'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select>")
$('#thelist').html('')
$('#thelist').append($(l))
$('#thelist').page()
//$('#theplace').after($("<select id='thelisttemplate'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select>"))
//$('#thelisttemplate').page()
})
$('#clearall').click(function() {
$('#thelist').html('')
})
</script>
</html>
Actualización: Usando la respuesta de naugur a continuación, la nueva función de lista de añadir vería así ...
$('#addlist').click(function() {
l = $("<select id='thelisttemplate'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select>")
$('#thelist').html('<div data-role="collapsible-set" id="newstuff"></div>');
$("#newstuff").html(l).page();
})
Actualización # 2: Al parecer, esto se considera obsoleto, ver más abajo para algunas ideas sobre cómo solucionar en beta2.
El enhanceWithin va a hacer el trabajo para usted: https://api.jquerymobile.com/enhanceWithin/ –