IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
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

jQuery Discussion :

Deuxième clic non pris en compte


Sujet :

jQuery

  1. #1
    Membre du Club
    Homme Profil pro
    Analyste programmeur
    Inscrit en
    Juillet 2011
    Messages
    32
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Analyste programmeur
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juillet 2011
    Messages : 32
    Points : 41
    Points
    41
    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
    Modérateur
    Avatar de ProgElecT
    Homme Profil pro
    Retraité
    Inscrit en
    Décembre 2004
    Messages
    6 068
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Haute Savoie (Rhône Alpes)

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

    Informations forums :
    Inscription : Décembre 2004
    Messages : 6 068
    Points : 17 155
    Points
    17 155
    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>
    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.
    Balises[C]...[/C] code intégré dans une phrase.
    Balises[C=NomDuLangage]...[/C] code intégré dans une phrase 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.
    👉 → → Ma page perso sur DVP ← ← 👈

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

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    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
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 396
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : Suisse

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

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 396
    Points : 4 825
    Points
    4 825
    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
    39 636
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    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 : 39 636
    Points : 66 655
    Points
    66 655
    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

    Venez sur le Chat de Développez !

  6. #6
    Invité
    Invité(e)
    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()
    Dernière modification par Invité ; 12/03/2019 à 13h53.

Discussions similaires

  1. Clic non pris en compte
    Par ninjah dans le forum jQuery
    Réponses: 4
    Dernier message: 02/10/2015, 14h00
  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, 15h21
  3. [ASE][SQL]WHERE non pris en compte
    Par Benjamin78 dans le forum Sybase
    Réponses: 1
    Dernier message: 24/03/2006, 13h00
  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, 11h57
  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, 09h35

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