Discussion :

[mr_ersatz]

Bonjour à tous,

Toujours débutant en jQuery,
je construis une appli web pour modifier les éléments d'un tableau à la volée.
Je clique sur une cellule (td > span.to_edit) pour la changer en input.
Quand je clique sur une autre cellule, ça retransforme les autres input en span.
Tout fonctionne sauf que je ne peux plus re-cliquer sur un span qui a déjà été édité, alors qu'en html, tout semble ok.

Voici le code.

Code :

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

1
2
3
4
5
6
7
8
(function(){
	$(".to_edit").click(function() {
		$('td input[type=text]').not(this).each(function() {
			$(this).replaceWith('<span class="to_edit" name="'+$(this).attr('name')+'">'+$(this).val()+'</span>');
		})
		$(this).replaceWith('<input type="text" name="'+$(this).attr('name')+'" value="'+$(this).text()+'" />');
	})
});

Merci de votre aide

[Toufik83]

Bonjour,

...
Tout fonctionne sauf que je ne peux plus re-cliquer sur un span qui a déjà été édité, alors qu'en html, tout semble ok.

C'est parce que vous n'attachez pas l'événement clic aux éléments .to_edit par délégation, essayez comme ceci :

Code :

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

1
2
3
$("#idParent ou .classParent").on("click",".to_edit",function() {
/*votre code ici*/
});

[mr_ersatz]

Impeccable, merci Toufik83 !