11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
J'assiste à un phénomène étrange, mais j'espère facile à résoudre.
Sur une page d'un site de cuisine, j'ai deux divisions, chacune décomposées en plusieurs sous-divisions : La première div est la liste de tous les ingrédients référencés sur le site, la seconde div est la liste des ingrédients que le membre a en sa possession. Dans ces divisions, ce sont donc des suites de div d'ingrédients, classées selon leur classe (fruits, legumes, etc.). Ces listes sont générées à partir de PHP.
L'idée du script est de faire en sorte qu'en cliquant sur les éléments de la division de gauche, ceux-ci disparaissent et réapparaissent dans la division de droite, et vice-versa.
Le problème, c'est que dans le sens gauche -> droite, ça ne fonctionne que pour le premier élément.
Pour tous les autres, ils se contentent de disparaitre. Mais dès que le premier élément a disparu, le "nouveau" premier élément fonctionne de nouveau.
Dans le sens droite -> gauche, ça fonctionne très bien, quelque soit l'élément sélectionné.

Voilà la partie du script qui ne fonctionne pas :


$("#widget_cuisineIngredients .element_recherche").live("click" , function(){	
	
	//retient les infos de l'élément et l'enlève du widget	
		var ing = $(this).html();			
		var ingId = $(this).attr("id");		
		var classe = $(this).prev("h4").attr("id");
		$(this).remove();	

       //on crée l'élément à ajouter
	var element_cuisine = '<div class="element_cuisine"><div class="supprIng">Supprimer</div>'+ing+'<input type="hidden" value="'+ingId+'" name="ingCuisine[]"/></div>';

      //On ajoute
	$('#maCuisine div#'+classe+'').find('.listeElementsCuisine').append(element_cuisine);	
	
});


Comme je le disais, son symétrique droite vers gauche fonctionne, en utilisant les mêmes principes.
Quand je fais un alert(element_cuisine) à la place de la ligne append, l'alert fonctionne pour tout élément et indique les bonnes valeurs.
Quand je le fais sous firebug, ça ne marche pas non plus, la fonction live() ne semble pas en cause non plus.
Bref, si quelqu'un voulait bien me donner son avis sur l'origine du problème, j'apprécierais énormément.
Merci !
Salut,

Je ne sais pas si je vais répondre à ton problème mais je vais relever un petit problème d'incohérence (qui n'a peut être pas d'influence sur le résultat).
 var classe = $(this).prev("h4").attr("id"); 

La variable classe récupère l'identifiant de l’élément h4 ?

Petite question pour faire avancer le problème : Les éléments de gauche ont ils la même structure html que ceux de droite ?
Si c'est le cas tu devrais peut être voir auprès de la fonction clone().
Hum oui, tu as raison, je ne suis pas particulièrement fier de cette technique d'id dans un h4, mais c'est passager : j'ai essayé différentes méthodes et ça ne change rien au problème. Je prévois à très court terme de remettre tous les element_recherche dans une div contenant l'id actuellement présent dans le h4. Mais encore une fois, div supplémentaire ou pas, ça ne change rien.

Pour ton deuxième point, non, ils n'ont pas tout à fait la même structure html.
La colonne de gauche est composée sur le principe :
- d'un <h4>
- puis d'une <div id="classe des ingrédients">
- puis d'une série de <div class="element_recherche">.
- et re-belote tant qu'il y a des classes d'ingrédients.
Le tout est généré en PHP.

La colonne de droite, déjà, est un formulaire, vu qu'une fois que le membre a cliqué pour établir ce qu'il possédait, il a un bouton envoi pour mettre à jour son inventaire. Donc on a :
- un <form>
- puis des <div id="classe des ingredients"> contenant chacun <fieldset> et <legend>,
- au sein de ces div, une <div class="listeElementsCuisine">
- et enfin les <div class="element_cuisine">.
Le tout aussi généré par PHP.

J'avoue avoir du mal à comprendre en quoi l'organisation html, bien que confuse, puisse être en cause vu que actuellement ça marche pour le premier élément.
Bon alors, c'est désespérant, mais depuis que j'ai remis la div sous le h4 contenant tous les éléments, ça remarche. J'étais pourtant quasiment certain que ça ne marchait pas. Je ne comprends pas. Je dois complètement craquer.
Bref, ça remarche pour tous les éléments, sujet résolu et clos. A supprimer, même. Honte sur moi. Encore.