Hola, mi problema es que estoy usando jquery para un sistema de reinscripción en una escuela, entonces para seleccionar materias dividí en dos div, el primero muestra las materias que se obtienen de la base de datos y el segundo muestra la selección hasta el momento, de esta forma:
Código HTML:
<div class="demo" id="materias">
<div id="tab">
<ul>
<li><a href="#todas">Materias</a></li>
<li><a href="#primero">1° Sem</a></li>
</ul>
<div id="todas">
<ul id="ul_todas">
<li id="li1">Materia 1<input type="button" value="Agregar" id="1" /></li>
<li id="li2">Materia 2<input type="button" value="Agregar" id="2" /></li>
<li id="li3">Materia 3<input type="button" value="Agregar" id="3" /></li>
</ul>
</div>
<div id="primero">
<ul>
<li>Materia 1</li>
</ul>
</div>
</div>
</div>
<div class="demo" id="seleccion">
<div id="tab2">
<ul>
<li><a href="#seleccionadas">Materias Seleccionadas</a></li>
</ul>
<div id="seleccionadas">
<ul id="ul_seleccion"></ul>
</div>
</div>
</div>
Como se puede ver, para cada materia agrego un botón que tiene el mismo id que el elemento de la lista, esto lo hago para removerlo de un div y pasarlo a jquery por medio de la siguiente función:
Código:
$(function(){
$("input:button").button().click(function(){
var a=$(this).attr("id");
$("#li"+a)
.remove()
.appendTo("#ul_seleccion");
});
});
Todo esto funciona de manera adecuada si las materias estan agregadas manualmente de forma estática, pero al hacer una consulta y agregarlo por medio del metodo append de jquery es decir de forma dinámica los botones dejan de funcionar es decir:
Código:
$(document).ready(function(){
$.getJSON("consulta_materias.php",function(materias){
for(var i=0; i<=(materias.length)-2; i=i+2){
$("#ul_todas").append("<li id='li"+materias[i]+"'>"+materias[i+1]+"<input type='button' value='Agregar' id='"+materias[i]+"' /></li>");
}
});
});
De esta forma los botones no tienen la misma funcionalidad, como puedo hacer para que hagan lo mismo que si los agregara normalmente con codigo html?
por favor que alguien me ayude, me urgeeee!!!