Suppression d'un élément

**Sayrus** · 12/09/2009, 17h23

Bonjour,

Avec mootools je suis en train de créer un système d'ajout et suppression de champs à la volée.

Voici un exemple:

Code :

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

1
2
3
<div id="div_1"><input id="input_1" value="" /><input type="button" class="remove" value="bt_remove_option'" /></div>
<div id="div_2"><input id="input_2" value="" /><input type="button" class="remove" value="bt_remove_option'" /></div>
...

Impossible de supprimer un champ en passant par la fonction suivante:

Code :

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

1
2
3
4
5
6
7
8
9
10
 
$$('.bt_remove_option').each(function(el, i){
 
        el.addEvent('click',function(e){
 
	        el.addEvent('click', this.getParent().destroy());                               
 
	});
 
});

En fait, si je crée des champs au départ, la suppression fonctionne, si j'ajoute des champs à l'aide d'une fonction js, ceux-ci apparaissent bien les uns en dessous des autres, mais si je clique sur le bouton "remove", ceux ajoutés dynamiquement ne s'efface pas... Impossible d'appeler la fonction ci-dessus.

Ai-je fais quelque chose de travers?

Merci de votre aide!

Voici ci-dessous le code complet pour ceux qui voudrait tester:

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
 
 
<head>
 
<script src="mootools-1.2.3.js" type="text/javascript"></script>
 
<script language="javascript">
<!--
 
	window.addEvent('domready', function() {
 
		//données triées par order croissant via PHP sur le champs "order"
 
		var myAttributes=[{attrId:'15',myTitle:'Un attribut de test!', attrType:'select', attrOrder:'1', myValue:'Une valeur de test'},{attrId:'16',myTitle:'Un attribut de test2!', attrType:'input', attrOrder:'2', myValue:''}];
 
		var myOptions=[{optionId:'1', optionAttrId:'16', optionValue:'Noir'},{optionId:'2', optionAttrId:'16', optionValue:'Blanc'},{optionId:'3', optionAttrId:'16', optionValue:'Bleu'}];
 
		var nbrAttr=0;
		var content='<input class="bt_add" value="add attribute" type="button" />';
 
		myAttributes.each(function(item, index){
 
			var nbrOpt=0;                                                                                              
 
			if(item.attrType=='input'){
 
				content+='<div id="div_'+(nbrAttr+1)+'"><input name="attribute[]" id="attribute_'+(nbrAttr+1)+'" value="'+item.myTitle+'" size="30" maxlength="30" type="text"> <input class="bt_remove" value="delete" type="button" /></div>';
 
			}else if(item.attrType=='select'){
 
				var options='<div id="div_'+(nbrAttr+1)+'_option"><input class="add_option" type="button" value="Add option" />';
 
				myOptions.each(function(item2, index2){
 
					options+='<div id="div_'+(nbrAttr+1)+'_option_'+(nbrOpt+1)+'"><input type="text" name="attribute_'+(nbrAttr+1)+'_option[]" id="attribute_'+(nbrAttr+1)+'_option_'+(nbrOpt+1)+'" value="'+item2.optionValue+'" size="30" maxlength="30" /><input class="bt_remove_option" value="delete" type="button" \/></div>';                                                                                
 
					nbrOpt++;  
 
				});
 
				options+='</div>';
 
				content+='<div id="div_'+(nbrAttr+1)+'"><input name="attribute[]" id="attribute_'+(nbrAttr+1)+'" value="'+item.myTitle+'" size="30" maxlength="30" type="text" /> <input class="bt_remove" value="delete" type="button" />'+options+'</div>';
 
			}
 
			nbrAttr++;
 
		});
 
		$('input_container').set('html', content);
 
			$$('.bt_remove').each(function(el, i){
 
				el.addEvent('click',function(e){
					el.addEvent('click', this.getParent().destroy());  
					nbrAttr--;
 
				});
			});
 
 
 
			$$('.bt_remove_option').each(function(el, i){
 
				el.addEvent('click',function(e){
 
					alert('ok');
					//el.addEvent('click', this.getParent().destroy());                               
 
 
				});
 
			});
 
		$$('.add_option').each(function(el, i){
 
			el.addEvent('click',function(e){                                  
 
			var lastId= this.getParent().getLast('div').id;
			var tmpId=lastId.split("_");
			var newDivId= 'div_'+tmpId[1]+'_option_'+(parseInt(tmpId[3])+1);
			var newInputId= 'attribute_'+tmpId[1]+'_option_'+(parseInt(tmpId[3])+1);
			var new_line = new Element('div', {
				'id':newDivId,
				'html': '<input type="text" name="attribute_'+(tmpId[1])+'_option[]" id="'+newInputId+'" value="" size="30" maxlength="30" /><input class="bt_remove_option" value="delete" type="button" />'
 
			});
 
 
			new_line.inject(this.getParent());
 
 
 
			});
 
		});
 
	});
 
-->
</script>
 
 
 
</head>
 
 
 
 
 
 
 
<body bgcolor="#FFFFFF">
 
        <div id="input_container" style="padding:10px;">
 
        </div>

**Sayrus** · 12/09/2009, 18h11

En fait je me rends compte que je n'arrive pas à interagir sur un élément que je créer.

Quelqu'un peut-il me montrer un exemple de bouton créé dynamiquement sur lequel on ajoute un évènement 'click' et qui fonctionne?

Merci!!!!

**vermine** · 30/07/2010, 10h36

Vous devez réappliquer la gestion des évènements lorsque vous créez un nouvel élément dynamiquement:

Code js :

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

1
2
3
4
5
6
7
8
9
 
new_line.inject(this.getParent());
 
$$('.bt_remove_option').each(function(el, i){
     el.addEvent('click',function(e){					    
     alert('ok');
     //el.addEvent('click', this.getParent().destroy());                               
     });
 });

**Sayrus** · 05/08/2010, 16h50

Un grand merci!

Suppression d'un élément [MooTools]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager