Lista editable soy nuevo en el foro.
Me encuentro realizando un código usando html, javascript y jquery. Lamentablemente hay un problema que no he podido solucionar y quisiera ponerlo a discusión con el fin de encontrar una solución :)
En el código la idea es crear una lista de elementos. Cada elemento de la lista posee a su vez unos elementos específicos que se despliegan al momento de darle clic encima al elemento de la lista. El objetivo es empezar con un elemento y a medida que yo quiera, poder agregar otro elemento a la lista, el cual tenga visualmente los mismos elementos al hacerle clic. Para agregar elemntos a la lista estoy usando el metodo append(), el cual agrega efectivamente el elemento a la lista. El problema con el que me he topado es q en el nuevo elemento creado, al darle clic, los elementos internos se ven de manera distinta a como se ve el que esta creado por default.
El codigo que estoy usando es el siguiente:
<title>Lista con Botones</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<iframe src='' name='iframecontoff' style="width:0px;height:0px;visibility:hidden"></iframe>
<iframe src='' name='iframeconton' style="width:0px;height:0px;visibility:hidden"></iframe>
<style>
.cuadro
{
padding:10px;
display:none;
text-align:center;
border:solid 1px #c3c3c3;
}
</style>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Lista con Botones en jQuery Mobile</h1>
</div>
<div data-role="content" >
<button id="btn2">Agregar</button>
<ul id=list1 data-role="listview" data-inset="true" data-filter="false">
<li><a href="#" id="flip" class="fila">
elemento1</a><a href="#" data-icon="delete">Favorita</a><div id="panel" class="cuadro">
<label for="name">label:</label>
<input type="text" name="name" value="" maxlength="3" id="referencia" />
<label for="slider2">label2:</label>
<select id="slider2" data-role="slider">
<option value="off">Off</option><option value="on">On</option>
</select>
</div>
</li>
</ul>
</div>
<div data-role="footer" data-theme="b">
<h4>LightGo<br/>
Todos los derecchos reservados</h4>
</div>
</div>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle();
});
$("#btn2").click(function(){
$("#list1").append('<li><a href="#" id="flip3">elemento2</a><a href="#" data-icon="delete">Favorita</a><div id="panel3" class="cuadro"><label for="name">label:</label><input type="text" name="name" value="" maxlength="3" id="referencia" /><label for="slider2">label2:</label><select id="slider2" data-role="slider"><option value="off">Off</option><option value="on">On</option></select></div></li>');
$('#list1').listview('refresh');
$("#flip3").click(function(){
$("#panel3").slideToggle();
});
$('#list1').listview('refresh');
});
});
</script>
Espero encontrar alguna solucion a este inconveniente.
De antemano mil gracias por la ayuda
