Parcours d'un tableau

**grinder59** · 18/02/2015, 00h05

Bonjour,

Je suis en train d'écrire un script qui fait la chose suivante :
- afficher une liste
- au choix d'un item de la liste, afficher une sous liste
- au choix d'un item de la sous liste (qui possède un id unique), afficher 3 inputs de formulaire + 1 bouton enregistrer
- au clic sur enregistrer : ajout les éléments des inputs dans un tableau associatif avec l'id unique comme index + une crois au bout de chaque ligne d'item permettant la suppression de la ligne
- au clic sur le bouton supprimer : parcours du tableau et retrait de la ligne dont l'id a été passé en paramètre.

Jusque là tout va presque bien... En effet, je clique sur un thème, sélectionne le sous thème, saisis des éléments dans les champs et clique sur enregistrer.
Je vois bien ma sélection dans le tableau (j'affiche le tableau) et j'ai bien la croix pour supprimer.

Le problème : je clique d'une une croix, ça retire bien la ligne du tableau, mais si je clique sur les autres items, rien ne se passe (pas d'erreur ou d'infos dans la console). Voici mon code :

Code html :

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
 Partie HTML
<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		<script type="text/javascript" src="custom.js"></script>
	</head>
 
	<body>
 
	<div id=theme></div>
	<hr>
	<div id=categorie></div>
	<hr>
	<div id="formExpertise" style="display:none;">
		<input type=text id="selectedCat">
		<input type=text id="selectedCatId">
		<select id="niveauCat">
			<option value=0>débutant</option>
			<option value=1>confirmé</option>
			<option value=2>expert</option>
		</select>
		<input type=text id="tagsCat">
		<textarea id="commentaireCat"></textarea>
		<input type=button id="regExpertise" value="enregistrer">
	</div>
	<hr>
	<div id="listeExpertise"></div>
	<hr>
	<input type=button id="checkTab" value="check">
</html>

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
 PARTIE JS
$( document ).ready(function() {
 
	// liste des sélection
	var tabSelect = new Object();
	var nbSelection = 0;
	var tabCategorie = new Object();
 
	// liste des thèmes
	var theme = new Object();
		theme["1"] = 'theme 1';
		theme["2"] = 'theme 2';
		theme["3"] = 'theme 3';
 
	// liste des catégories par thèmedia
	var categories = new Object();
 
	var categorie = new Object();
		categorie["11"] = 'categorie 11';
		categorie["12"] = 'categorie 22';
		categorie["13"] = 'categorie 23';
		categories["1"] = categorie;
 
	var categorie = new Object();
		categorie["21"] = 'categorie 21';
		categorie["22"] = 'categorie 22';
		categorie["23"] = 'categorie 23';
		categories["2"] = categorie;
 
	var categorie = new Object();
		categorie["31"] = 'categorie 31';
		categorie["32"] = 'categorie 32';
		categorie["33"] = 'categorie 33';
		categories["3"] = categorie;
 
	var str = '';
 
	// affichage des thèmes
	for(var i in theme){
		str += '<li><a href=# class="selectTheme" id="'+i+'">'+theme[i]+'</a></li>';
	}
	$("#theme").html(str);
 
	// sur la sélection d'un thème, on affiche une catégorie
	$(".selectTheme").click(function(){
		var str = '';
		for(var i in categories[this.id]){
			str += '<li><a href=# class="selectCateg" id="'+i+'">' + categories[this.id][i] + '</a></li>';
		}
		$("#categorie").html(str);	
 
		// sélection d'une catégorie
 
		$(".selectCateg").click(function(){
 
			$("#selectedCatId").val(this.id);
			$("#selectedCat").val($(this).html());
			$("#formExpertise").show();
 
		});
 
	});
 
	// enregistrement d'un élément
	$("#regExpertise").click(function(){
		// création d'un tableau avec les données renseignées
		var tab =  new Object();
			tab["0"] = $("#selectedCatId").val();
			tab["1"] = $("#selectedCat").val();
			tab["2"] = $("#niveauCat option:selected").val();
			tab["3"] = $("#tagsCat").val(); 
			tab["4"] = $("#commentaireCat").val();
 
		// ajout de tab dans le tableau des sélections
		tabSelect[$("#selectedCatId").val()] = tab;
 
		// affichage des données du tableau
		$("#listeExpertise").html(displayTab(tabSelect));
 
		// suppression d'un élément
		$(".suppExpertise").click(function(){
 
			var tabTmp = new Object();
			for (var indiceTab in tabSelect){
				if (indiceTab != this.id){
					tabTmp[indiceTab] = tabSelect[indiceTab];
				}
			}
			tabSelect = new Array();
			tabSelect = tabTmp;
 
			// affichage des données du tableau
			$("#listeExpertise").html(displayTab(tabSelect));
		});	
 
	});
 
	$("#checkTab").click(function(){	
		alert(objSize(tabSelect));
	});
 
	function displayTab(tab){
		strSel = '';
		for (var j in tab){
			strSel += '<li>' + j + ' => ' + tab[j][0] + ' - ' +  tab[j][1] + ';' +  tab[j][2] + ';' +  tab[j][3] + ';' +  tab[j][4] + ' => <a href=# class="suppExpertise" id="' + j + '">X - ' + j + ' - X</a>';
		}
		return strSel;
	}

Auriez-vous une idée du pourquoi du comment ? Une piste ?

Merci de votre aide !

**Golgotha** · 18/02/2015, 17h27

Bonjour,

Je sais pas trop pourquoi tu défini le .click de suppression dans l'événement de l'enregistrement, et pour te dire franchement je ne sais même pas trop ce que ça doit faire, à part que ça me parait bancal.

Pour moi il faut définir l'événement click de suppression en dehors avec un .on pour binder les éléments dynamiques.

$("#listeExpertise").on('click' , '.suppExpertise' , function(){ ..... });

Voilà m'sieur

Parcours d'un tableau

jQuery

Discussions similaires

Partager

Partager