Deuxième clic non pris en compte

Version imprimable

Bonjour

Sur un texte, je clique pour changer le contenu et je souhaiterais faire un deuxième clic pour revenir au texte initial

Voici le code que j'ai fait

Code:

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
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
</head>
<body>
 
	<div id=favpage><a id="ajfav">Ajouter à mes favoris</a></div>	
 
    <script src="http://code.jquery.com/jquery-3.3.1.js"></script>
 
 
    <script>
        $(document).ready(function() {              
            
                        $("#ajfav").click(function() {
                                var nb_fav = parseInt($("#ic_fav_nb").text(),10)+1;
                                $("#ic_fav_nb").text(nb_fav);
                                $("#ic_fav_nb2").text(nb_fav);
                                $("#ic_fav_img").text("favorite");
                                $("#favpage").html("<a id=\"supfav\">Supprimer de mes favoris</a>");
                        });
                        $("#supfav").click(function() {
                                var nb_fav = parseInt($("#ic_fav_nb").text(),10)-1;
                                $("#ic_fav_nb").text(nb_fav);
                                $("#ic_fav_nb2").text(nb_fav);
                                $("#ic_fav_img").text("favorite_border");
                                $("#favpage").html("<a id=\"ajfav\">Ajouter à mes favoris</a>");
                        });
                
                });
    </script>        
 
</body>
</html>

$("#supfav") n'est pas pris en compte, surement par ce que la balise n'existe pas au départ.
Pourriez vous me dire comment rectifier le problème ?

Cordialement
actiproj

Salut
Et si tu mes le chargement du jquery dans le head?
Code:

1 2 3 4 <head> <meta charset="utf-8"> <script src="http://code.jquery.com/jquery-3.3.1.js"></script> </head>

11/03/2019, 18h20
Watilin
Bonjour,

pour schématiser ton code, on a en gros ceci :
Code:

1 2 3 4 5 6 $(document).ready(function() { $("#ajfav").click(function() { ... }); $("#supfav").click(function() { ... }); });
Le problème c’est que #supfav est crée à l’intérieur de la fonction .click() de #ajfav. Donc au moment où tu sélectionnes $("#supfav"), l’élément n’existe pas et jQuery te renvoie un objet vide. Tu peux le constater avec la console :
Code:

1 2 3 4 5 6 7 $(document).ready(function() { $("#ajfav").click(function() { ... }); console.log( $("#supfav") ); $("#supfav").click(function() { ... }); });
11/03/2019, 19h13
Toufik83
1-Puisque tu utilise $(document).ready(), je ne vois pas l'utilité de mettre ton script en bas de page (suggestion de ProgElect).

2-au lieu de
Code:

1 2 3 $("#supfav").click(function(){/* ton code */}); $("#ajfav").click(function() {/* ton code */});
Il faut suivre la (suggestion de Watilin):
Code:

1 2 3 $("body").on("click","#supfav",function(){/* ton code */}); $("body").on("click","#ajfav",function() {/* ton code */});
tu peux choisir un autre sélecteur au lieu de "body", de préférence le parent le plus proche.
12/03/2019, 08h24
SpaceFrog

L'explication est que si tu change le contenu sur un click, ce nouveau contenu n'a pas reçu l'affectation du click sur le onload.
Il faut donc l'affecter par délégation.

Bonjour,

il y a une autre solution :

Code:

<div id="favpage"><a data-action="add">Ajouter à mes favoris</a></div>

Code:

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
27
28
 
	<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
	<script>
	$(document).ready(function() {
 
		$("#favpage > a").on('click', function() {
			if( $(this).attr("data-action") == "add")
			{
				var nb_fav = parseInt($("#ic_fav_nb").text(),10)+1;
				$("#ic_fav_nb").text(nb_fav);
				$("#ic_fav_nb2").text(nb_fav);
				$("#ic_fav_img").text("favorite");
				$(this).attr("data-action","del");
				$(this).html("Supprimer de mes favoris");
			}
			else if( $(this).attr("data-action") == "del")
			{
				var nb_fav = parseInt($("#ic_fav_nb").text(),10)-1;
				$("#ic_fav_nb").text(nb_fav);
				$("#ic_fav_nb2").text(nb_fav);
				$("#ic_fav_img").text("favorite_border");
				$(this).attr("data-action","add");
				$(this).html("Ajouter à mes favoris");
			}
		});
 
	});
	</script>

N.B. Si les liens doivent avoir des styles CSS différents (couleur,...), on peut aussi ajouter/échanger des classes : .toggleClass()