Discussion :

[ThomasF]

Bonjour,

Sur le site que je développe en ce moment, j'ai une liste de membres qui est affichée et pour chaque membre, il y a un bouton qui permet de supprimer ce membre:

Code :

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

<button value="<?php echo $value['id']; ?>" class="dellMembre">Supprimer</button>

J'ai ma fonction jquery en bas de page qui fait un GET pour supprimer le membre en question et mettre à jour une partie de la page (ici la classe contentWrapper).

Code :

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

1
2
3
4
5
6
7
<script>
	$('.dellMembre').on('click', function() {
	var value=$(this).attr('value');
	console.log(value);
	$('.contentWrapper').load("index.php?section=deleteMembres&delete=" +value+" "+".contentWrapper");  
	});
	</script>

Cette fonction fonctionne bien mais ... une seule fois; en effet une fois que la page est mise à jour grâce à ce script les boutons ne fonctionnent plus
Le problème sembre uniquement provenir de cette ligne de code car ...

Code :

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

$('.contentWrapper').load("index.php?section=deleteMembres&delete=" +value+" "+".contentWrapper");

si j'enlève cette ligne le console.log(value) fonctionne tout le temps lorsque j'appuie sur tout les boutons.

Pour que la fonction fonctionne à nouveau, je suis obligé de rafraîchir la page manuellement.

Auriez-vous une solution ?
Merci beaucoup ! et bonne soirée
(ps: j'ai un doute, dois-je poser cette question dans la section forum javascript ?)

[ryan]

Yop!


Je ne suis pas certain que la méthode load() puisse être appliquée à un sélecteur de classe.

[ThomasF]

Je viens de remplacer la classe .contentWrapper par un id #contentWrapper et d'adapter le script en conséquence mais aucun changement n'est à noter

Edit: En regardant sur d'autres sites pour voir si ce problème existait ailleurs j'ai vu une réponse qui n'apportait pas de solution "What’s happening is the stuff you add in the div doesn’t get added to the DOM tree", il y a aussi des gens qui parlent d'une fonction live: j'ai essayer de remplacer .on par .live mais ça plante.

[Invité]

Bonjour,
1/ remplace :

Code :

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

	$('.dellMembre').on('click', function() {

par

Code :

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

1
2
3
	$('body').on('click', '.dellMembre', function() {
ou
	$('#contenu').on('click', '.dellMembre', function() {

En effet, la fonction supprime (à priori ?) le bouton de class '.dellMembre'... qui n'est donc plus présent dans le DOM.
Même si d'autres boutons de même classe sont présents, ça "perturbe"...
$('body'). ou $('#contenu'). fournissent un "point fixe", toujours présent.
Voir :

• jQuery .on()

2/ Par contre, on ne sais rien de ".contentWrapper" ??
C'est un div existant dès le début ? ou créé ?...

[ThomasF]

.contentWrapper est une div qui existe dès le debut

Mille merci ! ça fonctionne nickel !
Vous m'enlevez une sacrée épine du pied !