Ajout/suppression de champs

Bonjour,

J'ai fait un script qui permet d'insérer et de supprimer des champs dans un formulaire.
L'ajout marche très bien! mais la suppression bug un peu!

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function()
{
	jQuery("span#add_tag").click(function(event) {
	  	event.preventDefault(); // empêche le traitement par défaut de l'évenement
		});
	jQuery("img#remove_tag").click(function() {
		jQuery(this).parent().empty();
	});
	jQuery("span#add_tag").click(function() {
		jQuery("#liste_conteneurs").append('<p><img src="<?php echo _PATH_IMAGES_; ?>remove.png" alt="" border="0" style="cursor: pointer" id="remove_tag"/><label for="nom_conteneur">Nom  <input type="text" name="nom_conteneur[]" /></label></p>');
	});
});
</script>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<form method="post" name="form1" id="form1">
 
<input type="hidden" value="" name="id_table"/>
 
<div id="liste_conteneurs">
<p><img border="0" id="remove_tag" style="cursor: pointer;" alt="" src="http://127.0.0.1/mercurius/libs/templates/images/remove.png"/><label for="nom_conteneur">Nom  <input type="text" name="nom_conteneur[]"/></label></p>
 
</div>
 
    <span id="add_tag" style="cursor: pointer;"><img border="0" alt="" src="http://127.0.0.1/mercurius/libs/templates/images/add.png"/> Ajouter conteneur</span>
  <p><input type="submit" value="Ajouter" name="envoyer"/></p>
 
</form>

Mon problème est le suivant: quand je clic sur image remove affecté à un champ présente dès la création du formulaire tout se passe bien. Cependant quand j'ajoute un nouveau champs dynamiquement et que je clic sur le bouton remove, rien ne se passe...

une idée?

Merci d'avance

Laurent

Salut,

Tu assignes les évènements une fois le DOM initial prêt. Tout nouvel élément
inséré par après n'a pas d'évènement assigné.

deux possibilités:

1) Assigner à nouveau les évènement après modification du DOM
2) utiliser Jquery live

Tu utilise un chemin absolue pour les sources d'image, une fois hébergé, les images ne seront plus trouvés. Utilises un chemin relatif

Code:

<img border="0" id="remove_tag" style="cursor: pointer;" alt="" src="./libs/templates/images/remove.png"/>

Citation:

2) utiliser Jquery live

Merci bcp j'ai bien compris comment ca marche :)

Citation:

Tu utilise un chemin absolue pour les sources d'image, une fois hébergé, les images ne seront plus trouvés. Utilises un chemin relatif

tous les paths sont gérés par un fichier de configuration en PHP! no stress ^^

Merci bcp

Laurent