Modification d'html généré à la volée.

Bonjour,

Je suis en train de réaliser un formulaire d'ajout de liens. Mais j'ai un soucis avec l'html, si il a été généré avec le javascript je n'arrive pas à le modifier à nouveau part l'intermédiaire du javascript. Vous pouvez voir l'exemple ici : http://www.mangedeschips.net/temp/test.html

Si on ajoute un lien il est impossible de le supprimer ou de le modifier en cliquant dessus.
Pour les liens déjà présents, il est possible de les modifier une fois, mais après cela il est impossible de les rééditer ou de les supprimer.

Donc je voulais savoir si il y avait une solution à mon problème.

Voilà l'html :

<input id="Links" name="Jobs" />
<input id="Description" name="Description" />
<input id="RSS" name="RSS" />

<a id="addLinks" href="#">addLinks</a>

<ul id="listLinks">
	<li>
		<a class="deleteLinks" href="#"><img src="delete.png" /></a>
		<a class="editLinks" href="#">http://www.test.com</a>
		<p>
			<img src="feed.png" title="http://www.test.com/feed" />
			<img src="information_off.png" title="Le site de test. " />
		</p>
	</li>
</ul>

Voilà le javascript :

$(document).ready(function(){
	$("#addLinks").click(function(){
		var newLinks = document.getElementById('Links').value;
		if(newLinks!=""){
			var newRSS = document.getElementById('RSS').value;
			var newDescription = document.getElementById('Description').value;
			if(newRSS==""){
				var iRSS = "feed_off.png";
			} else { var iRSS = "feed.png"; }
			if(newDescription==""){
				var iDesc = "information_off.png";
			} else { var iDesc = "information.png"; }
			$("#listLinks").append('<li><a class="deleteLinks" href="#"><img src="delete.png" /></a><a class="editLinks" href="#">'+newLinks+'</a><p><a href="'+newRSS+'" target="_blank"><img src="'+iRSS+'" title="'+newRSS+'" /></a><img src="'+iDesc+'" title="'+newDescription+'" /></p></li>\n');
		} else {
			alert("Veuillez remplir le premier champ pour le lien.")
		}
	});
});
$(document).ready(function(){
	$(".editLinks").click(function(){
		ancienTexte = $(this).text();
		$(this).replaceWith('<input class="inputLinks" type="text" value="' + ancienTexte + '" />');
		$("input").keypress(function (e) {
			if(e.which == 13) {
			nouveauTexte = $(".inputLinks").val();
				$(this).replaceWith('<a class="editLinks" href="#">' + nouveauTexte + '</a>');
			}
		});
	});
});
$(document).ready(function(){
	$(".deleteLinks").click(function(){
		$(this).parent().remove();
	});
});

Merci d'avance pour vos réponses!
Modifié par Peusly (11 Nov 2008 - 15:29)