Discussion :

[cbalmefrezol]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[marcha]

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

[andry.aime]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[cbalmefrezol]

2) utiliser Jquery live

Merci bcp j'ai bien compris comment ca marche

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