Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Nouveau membre du Club
    Homme Profil pro
    Développeur Web et Windows
    Inscrit en
    juillet 2011
    Messages
    23
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Développeur Web et Windows
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juillet 2011
    Messages : 23
    Points : 29
    Points
    29

    Par défaut Deuxième clic non pris en compte

    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 HTML : 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
    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

  2. #2
    Rédacteur/Modérateur
    Avatar de ProgElecT
    Homme Profil pro
    Retraité
    Inscrit en
    décembre 2004
    Messages
    4 852
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 63
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Communication - Médias

    Informations forums :
    Inscription : décembre 2004
    Messages : 4 852
    Points : 10 916
    Points
    10 916

    Par défaut

    Salut
    Et si tu mes le chargement du jquery dans le head?
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <head>
        <meta charset="utf-8">
        <script src="http://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    ProgElecT
    Soyez sympa, pensez -y
    Balises[CODE]...[/CODE]
    Balises[CODE=NomDuLangage]...[/CODE] quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Le bouton en fin de discussion, quand vous avez obtenu l'aide attendue.
    ......... et pourquoi pas, pour remercier, un pour celui/ceux qui vous ont dépannés.

  3. #3
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    2 838
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 2 838
    Points : 6 120
    Points
    6 120

    Par défaut

    Bonjour,

    pour schématiser ton code, on a en gros ceci :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    $(document).ready(function() {
     
      $("#ajfav").click(function() { ... });
      console.log( $("#supfav") );
      $("#supfav").click(function() { ... });
     
    });
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  4. #4
    Membre expérimenté Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    844
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 844
    Points : 1 353
    Points
    1 353

    Par défaut

    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 js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
    $("#supfav").click(function(){/* ton code */});
    $("#ajfav").click(function() {/* ton code */});

    Il faut suivre la (suggestion de Watilin):
    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 272
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 272
    Points : 65 550
    Points
    65 550
    Billets dans le blog
    1

    Par défaut

    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.
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  6. #6
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    14 511
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 14 511
    Points : 29 378
    Points
    29 378

    Par défaut

    Bonjour,

    il y a une autre solution :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    	<div id="favpage"><a data-action="add">Ajouter à mes favoris</a></div>
    Code JavaScript : 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
    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()
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

Discussions similaires

  1. Clic non pris en compte
    Par ninjah dans le forum jQuery
    Réponses: 4
    Dernier message: 02/10/2015, 13h00
  2. [QR 4.05] Propriété imprimante non pris en compte
    Par portu dans le forum SAP Crystal Reports
    Réponses: 5
    Dernier message: 30/09/2008, 14h21
  3. [ASE][SQL]WHERE non pris en compte
    Par Benjamin78 dans le forum Sybase
    Réponses: 1
    Dernier message: 24/03/2006, 12h00
  4. Accents non pris en compte dans les requêtes SELECT
    Par YanK dans le forum Requêtes
    Réponses: 1
    Dernier message: 30/08/2005, 10h57
  5. [event] keyListener non pris en compte
    Par pierre.zelb dans le forum Agents de placement/Fenêtres
    Réponses: 5
    Dernier message: 03/08/2005, 08h35

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo