Solucionado:Creación dinámica de elementos con jquery

[shava]

Hola a todos. Llevo leyendo soluciones de la página desde hace un tiempo, y me parece un foro genial

Veréis, tengo un pequeño problema con jquery. Hace poco que le he empezado a dar a la tecla con Javascript y en algunas cosas no me aclaro aún.

Para empezar diré que utilizo el 1.4.2, ui.draggable y ui.droppable.

Con esto mi idea es generar una zona donde poder arrastrar una serie de chapas dentro de un objeto div, visualmente parecido a lo que google hace cuando arrastras las chinchetas, pero más simple.

Aquí os pongo el código jquery de mi script para crear la chincheta y eliminarla

Código:

	$("#crear_chapa").click(function(){
		numerochapa++;
		var chapa=$('<div id="draggable' + numerochapa + '" class="ui-widget-content" rel="'+numerochapa+'"><div class="cabeceraChapa"><a href="#" class="eliminarChapa"><img src="delete_16.png" height="10" /></a><a href="#" class="anadirInfo"><img src="bubble_16.png" height="10" /></a></div><img class="chinchetaBBDD" rel="sin_guardar" /></div>');
		$("#demo").append(chapa);
		chapa.css({position:"absolute",left:$("#zona_imagen").position().left + 300,top:$("#zona_imagen").position().top -35});
		chapa.draggable({
			containment: 'parent',
			zIndex:i,
			stop: function(){
				/* Para saber que cada vez que drageo, cual es la chapa seleccionada*/
				chapaseleccionada=$(this).attr("rel");
			},
			
			start: function(){
				chapaseleccionada=$(this).attr("rel");
			}
		});
		chapa.children(".chinchetaBBDD").attr("src","../enviar_img.php?archivo=" +  $("select option:selected").attr("rel"));	
	});
	
	$("a").click(function(event) {
		event.preventDefault();
	}); 
	
	$(".eliminarChapa").click(function(){
		alert("entro");
	});

Y este el enlace que está en la página

Código:

<a href="#" id="crear_chapa">Crear chapa</a>

Lo curioso es que el preventDefault() para crear_chapa si me lo hace perfecto.

Aparece el nuevo div que puedo arrastrar y colocar donde quiera, pero cuando le doy click a los enlaces que hay en el objeto dinámico, no me lo respeta, pues añade el "#" en la ruta y me ignora al evento click relacionado con la clase "eliminarChapa".

He estado buscando en el foro este error por si ya estaba solucionado, pero no lo he encontrado, será que soy un mal buscador .

¿Será que la forma de crear el objeto dinámicamente cuando hay muchos otros elementos dependientes no es la correcta?

Muchas gracias, y un saludo de este newbie de la informática



EDITO:Hola gente de nuevo, posteo la solución que he encontrado para este script.

Para los href creados dinámicamente he cambiado el código y he añadido lo siguiente

Código:

<a href="#" class="eliminarChapa" onclick="eliminarChapa()">

De forma que las funciones de eliminarChapa y anadirInfo, las he sacado del $document.ready de jQuery, y las he añadido aparte en otro documento js, al estar fuera parece ser que ya detecta cualquier elemento creado dinámicamente o estáticamente, de la otra forma parece ser que no lo detectaba al estar fuera de la inicialización.

[caricatos]

Tema movido desde AJAX