Foros del Web » Programando para Internet » Jquery »

Problemas al agregar un botón con jquery

Estas en el tema de Problemas al agregar un botón con jquery en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/05/2011, 13:35
 
Fecha de Ingreso: mayo-2011
Mensajes: 6
Antigüedad: 11 años
Puntos: 0
Pregunta Problemas al agregar un botón con jquery

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!!!
  #2 (permalink)  
Antiguo 20/05/2011, 09:48
Avatar de hmvr414  
Fecha de Ingreso: marzo-2011
Ubicación: Santiago de Cali, Colombia
Mensajes: 74
Antigüedad: 11 años, 2 meses
Puntos: 16
Respuesta: Problemas al agregar un botón con jquery

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

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.         $.getJSON("consulta_materias.php",function(materias){
  3.             for(var i=0; i<=(materias.length)-2; i=i+2){
  4.                 $("#ul_todas").append("<li id='li"+materias[i]+"'>"+materias[i+1]+"<input type='button' value='Agregar' id='"+materias[i]+"' /></li>");
  5.             }
  6.  
  7.             $("input:button").button().click(function(){
  8.                 var a=$(this).attr("id");
  9.                 $("#li"+a)
  10.                 .remove()
  11.                 .appendTo("#ul_seleccion");
  12.            });
  13.  
  14.         });
  15.     });
  #3 (permalink)  
Antiguo 20/05/2011, 09:56
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 11 años
Puntos: 344
Respuesta: Problemas al agregar un botón con jquery

También puedes usar el método live:

Código Javascript:
Ver original
  1. $(function(){
  2.         $("input:button").button().live('click',function(){
  3.             var a=$(this).attr("id");
  4.             $("#li"+a)
  5.             .remove()
  6.             .appendTo("#ul_seleccion");
  7.         });
  8.     });

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.
  #4 (permalink)  
Antiguo 20/05/2011, 21:06
 
Fecha de Ingreso: mayo-2011
Mensajes: 6
Antigüedad: 11 años
Puntos: 0
Respuesta: Problemas al agregar un botón con jquery

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.
  #5 (permalink)  
Antiguo 21/05/2011, 04:20
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 11 años
Puntos: 344
Respuesta: Problemas al agregar un botón con jquery

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.
  #6 (permalink)  
Antiguo 21/05/2011, 11:16
 
Fecha de Ingreso: mayo-2011
Mensajes: 6
Antigüedad: 11 años
Puntos: 0
Respuesta: Problemas al agregar un botón con jquery

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
  #7 (permalink)  
Antiguo 21/05/2011, 11:36
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 11 años
Puntos: 344
Respuesta: Problemas al agregar un botón con jquery

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.
  #8 (permalink)  
Antiguo 21/05/2011, 17:47
 
Fecha de Ingreso: mayo-2011
Mensajes: 6
Antigüedad: 11 años
Puntos: 0
Respuesta: Problemas al agregar un botón con jquery

tienes razón, estaba poniendo mal lo que me dijo hmvr414 XD estas distracciones jajaja
  #9 (permalink)  
Antiguo 21/05/2011, 17:54
 
Fecha de Ingreso: mayo-2011
Mensajes: 6
Antigüedad: 11 años
Puntos: 0
Respuesta: Problemas al agregar un botón con jquery

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

Etiquetas: append, dinamico, javascript, botones
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 03:21.