Problemas al agregar un botón con jquery

[italo1312]

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!!!

[hmvr414]

me parece que se debe ejecutar el primer código justo después de poblar la lista, puede ser algo así:

Código Javascript:

$(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>");
            }
 
            $("input:button").button().click(function(){
                var a=$(this).attr("id");
                $("#li"+a)
                .remove()
                .appendTo("#ul_seleccion");
           });
 
        });
    });
 

[alexg88]

También puedes usar el método live:

Código Javascript:

$(function(){
        $("input:button").button().live('click',function(){
            var a=$(this).attr("id");
            $("#li"+a)
            .remove()
            .appendTo("#ul_seleccion");
        });
    });
 

Al contrario que con bind o cualquier de los otros métodos para definir los manejadores de eventos (como click, change, etc.), live también funciona con los elementos que se incluyen después de realizar esta llamada.

[italo1312]

hmvr414 gracias por la ayuda pero no funcionó, y muchas muchas gracias alexg88 lo del método live me funcionó muy bien, ya los <li> se cambian de un div a otro, ahora solo me falta poder aplicar el método .button() de jquery-ui a todos los botones, porque esta funcionalidad sigue sin agregarse, ojalá puedan ayudarme de nuevo. Saludos.

[alexg88]

El código que ha puesto hmvr414 debería funcionarte también.

Lo de utilizar el método live sólo es interesante si vas a realizar más de una vez la carga de materias, pero si sólo es al inicio de cargar la página entonces hazlo mejor como te ha dicho hmvr414.

Sobre lo de button, definitivamente vas a tener que llamarlo después de realizar la carga de materias.

[italo1312]

No, lo de hmvr414 no me esta funcionando y la carga si se va a hacer multiples veces porque estaré trabajando con la base de datos, y con live ya esta funcionando, solo tengo que poder incluir lo de button

[alexg88]

Si no te funciona lo que te ha puesto hmvr414 es que lo estás poniendo mal. Lo del button la única manera es llamarlo después de realizar la carga de datos mediante AJAX.

[italo1312]

tienes razón, estaba poniendo mal lo que me dijo hmvr414 XD estas distracciones jajaja

[italo1312]

no se si es necesario pero pongo este tema como RESUELTO!!!