11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu]JQuery-Action ne s'effectue pas après modification de la clas

Bonjour à tous,

Voici mon problème. J'ai un lien "Ajouter" qui permet de faire un ajout en DB via JQuery quand on clique dessus. Je fais simplement un $.post() et cela se passe très bien.

Par contre une fois l'ajout effectué je change l'intitulé de ce lien par "Supprimer" et aussi la class car c'est cela qui me permet de détecter si je veux faire un ajout ou une suppression.

Le problème c'est que l'intitulé change bien, la class aussi mais quand je clique sur "Supprimer" l'action relative à la classe "supprimer" ne s'exécute pas mais c'est toujours l'action relative à la classe précédente ("ajouter").

Je ne sais pas si je suis clair mais en gros on dirait que JQuery ne détecte pas que la class de ce lien à changer et effectue toujours l'action relative à la class précédente.

Voici un peu de code pour éclaircir mes propos

Le lien de départ qui permet de faire l'ajout en DB :
<a id="44" class="ajouter" href="#">Ajouter</a>


Le code JQuery associe au clic de ce lien :

	$(".ajouter").click(function(event){
		$.post("ajouter_submit.php",
			{ 
				id: $(this).attr("id")
			},
				function(data){
					$("#"+data).text('Supprimer');
			$("#"+data).addClass("supprimer").removeClass("ajouter");
				}
		);		
		event.preventDefault();						
	});


Merci d'avance à ceux qui prendront le temps de me lire et de me répondre.

Kevin
Modifié par kevin.DWM (10 Aug 2011 - 15:30)
C'est normal, la class et les ID sont relatifs au DOM, c'est-à-dire l'arbre de ton site qui est chargé 1 seule fois.
Du coup, en modifiant dynamiquement la class, le DOM n'est pas mis à jour et pour lui la classe est toujours celle qu'il a analysé au chargement de la page.

Tu peux regarder du côté du plugin "livequery" qui met à jour le DOM après des actions dynamiques.
Ou, utiliser la propriété onclick sur ton lien.

Au lieu de mettre une classe, tu mets : onclick="addSubmit(44);"
Et tu changes ton code JS en : 

function addSubmit(id)
{
        $.post("ajouter_submit.php", 
            { id: id }, 
             function(data) { 
                    $("#"+id).html('Supprimer').attr('onclick', 'deleteSubmit('+id+');');
             } 
        );    
}
Hello,

Plusieurs remarques :

1 - un id ne peut commencer par un chiffre (ce n'est pas conforme). Et perso je t'invite à utiliser des id qui précisent les fonctions des éléments (ex : formInscription, submitNewUser, etc…). Je t'invite aussi à n'utiliser les id que pour les éléments uniques (telles les form, les div englobants toute une partie), et privilégier l'utilisation des classes (en conservant la même notation qui précise le rôle de l'élément)

2 - l'ajout d'interaction javascript en évènement onclick est quand même super dommage, vu que tu utilises jQuery. Contrairement à ce qu'à indiqué vincentD83, pas besoin d'utiliser le plug-in liveQuery, deux fonctions existent au sein de jQuery : delegate() et live().

Exemple avec live() (sans le $.post() ) :

$(".ajouter").live('click', function(event){
	alert('ajouter');
	$(this).text('Supprimer'); 
	$(this).addClass("supprimer").removeClass("ajouter"); 
	event.preventDefault();  
});
		
		
$(".supprimer").live('click', function(event){
	alert('supprimer');
	$(this).text('Ajouter'); 
	$(this).addClass("ajouter").removeClass("supprimer"); 
	event.preventDefault();  
});
Sujet clos
Aller à