Discussion :

[Portus]

Bonjour,

J'ai un problème avec la fonction replaceWith().

En effet, j'ai créé un calendrier, lorsque je clique sur un jour j'ai une croix qui apparait à la place du jour (pour ajouter un événement).

Si je clique sur un autre jour, le jour précédent se réaffiche et la croix s'affiche sur mon second choix.

Cependant si j'essaie de recliquer sur le premier choix, plus rien ne se passe.

Voici le lien pour tester, ce sera plus clair : http://www.fatal-destiny.com/calendrier/

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
$(document).ready(function() {
	$('#calendrier td a').click(function(){
 
		var nbReplace = $("span[class='replace']").length;
		if(nbReplace > 0)
		{
			var nbEvenements = $("span[data-evenement='1']").length;
			var jour = $("span[class='replace']").attr('data-valeur');
			var dateComplete = $("span[class='replace']").attr('data-date');
			if(nbEvenements > 0)
				$("span[class='replace']").replaceWith('<a href="#" class="'+dateComplete+'" style="display: inline-block;width: 200px; height: 120px; line-height: 120px; color: #ce2d2d;">'+jour+'</a>');
			else
				$("span[class='replace']").replaceWith('<a href="#" class="'+dateComplete+'" style="display: inline-block;width: 200px; height: 120px; line-height: 120px;">'+jour+'</a>');
		}
 
		var elemH2 = $(this);
		var elem = $(this).attr('class');
		var res = elem.split("-"); 
		$.get( "charger_nb.php", { date: elem }, function( data ) {
			if(data == 0)
				elemH2.replaceWith('<span class="replace" data-valeur="'+res[0]+'" data-date="'+elem+'"><a href="#" onClick="ajouterEvenement(\''+elem+'\'); return false;"><img src="images/ajouter.png" alt="Ajouter" title="Ajouter un événement" class="opacite" /></a></span>');
			else
				elemH2.replaceWith('<span class="replace" data-valeur="'+res[0]+'" data-date="'+elem+'" data-evenement="1"><a href="#" onClick="ajouterEvenement(\''+elem+'\'); return false;"><img src="images/ajouter.png" alt="Ajouter" title="Ajouter un événement" class="opacite" /></a> <a href="#" onClick="voirEvenement(\''+elem+'\'); return false;"><img src="images/voir.png" alt="Voir" title="Voir les événements" class="opacite" /></a></span>');
		});
	});
});

Auriez-vous une idée ?

Merci d'avance !

[SpaceFrog]

Ton souci provient du fait que tu insères dynamiquement des éléments dans ta page, et du coup il perdent leur attribution du click

Code :

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

$('#calendrier td a').click(function(){

pour que les évènements attribués sur le ready s'appliquent aux éléments insérés après la ready il faut par par on ou délégate

Code :

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

$('#calendrier td' ).on('click','a',function(e){ e.preventDefault()

...