Discussion :

[fredericmarcel]

Bonjour,
Je voudrais cloner un élement et modifier le texte du p de la classe "visuNom"
Le clonage fonctionne bien, mais le nom de visuNom reste "Element 1" au lieu d'afficher "Elément 2", puis "Elément 3" etc.

Le HTML

Code :

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

1
2
3
4
5
6
7
8
9
10
 
 <div id="visu">  
             <div id="element"  name="0" class="element">
                <div id="porteVisuNom" class="porteVisuNom">
                    <p id="visuNom" class="visuNom">Element 1</p>
                </div>   
         </div> 
 
        </div>
        <button id="clone">clone</button>

Le CSS

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
 
      #clone{
         position : fixed;
         top:20px;
         left:46%;
         font-size:20px;
         width:9%;  
         z-index:15;
        display:flex;
        flex-direction: row;
        justify-content: center;
         text-align:center;
         padding-right:5px;
          padding-left:5px; 
    }
 
 
         #visu {
             position:fixed;
             top:100px;
            width:90%;   
            z-index;1;
            margin-top:5px;
             height:68%;
            margin-left:6.5%;
            display:flex;
            flex-flow: row wrap;
            align-content:flex-start;
            justify-content:flex-start;  
             // background-color:yellow;
             overflow:scroll;
        }
 
          .element {
              display: flex;
              flex-direction: column;
              justify-content:center;
             //box-shadow: 3px 3px 3px #4d4d4d;
             // border-radius: 10px;
              padding-left:10px;
              padding-right:10px;
              margin-bottom:25px;
              margin-right:20px;
              width:31%;
              z-index:20;
            //  height:50%
 
      } 
 
          .porteVisuNom {
          display: flex;
          flex-direction: column;
          justify-content:center;
          align-items: center;
          background-color: white;
          border: 7px solid limegreen;
          border-radius: 10px;
         // padding-left:5px;
         // padding-right:5px;
        // width:25%;
          height: 170px;
         // margin: 5px 0px;
        margin-bottom:8px;
        //overflow:scroll;
 
      } 
 
      .visuNom {
         font-family:"Helvetica Neue";
         padding-top:8px;  
        padding-bottom:8px;  
         padding-left:10px;
         padding-right:10px;
         color:black;			     
		 line-height:110%;
         text-align:center; 
         font-size:2.5em;  
         // width:260px;
      }

Le code JS

Code :

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

1
2
3
4
5
6
7
8
 
          var totalElements=0;
 
  $("#clone").click(function(){
      totalElements++;
      $("#element").clone().attr('id','element' +totalElements).appendTo("#visu").hide().fadeIn(2200, 'swing');
      var leNom = "Element" + totalElements
     //je voudrais que le p visuNom affiche la variable leNom

J'ai cherché partout, mais je ne trouve pas la solution.
Merci de votre aide. Je suis vraiment bloqué .

[Invité]

Bonjour,

1/ il me semble qu'on a déjà dit qu'on ne peut/doit pas dupliquer des id, non ?
Un id DOIT être UNIQUE.

Or, tu dupliques allègrement id="porteVisuNom", id="visuNom" (qui, à priori, ne servent à rien...)

2/ Que vient faire name="0" sur un <div> ?

3/ Pour répondre à ta question :

Code :

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

    $("#element" + totalElements + " .visuNom").html("Element " + totalElements)

[fredericmarcel]

Ca fonctionne parfaitement.
En ce qui concerne le fait de dupliquer des id, je vais les remplacer par des class.
Le name indiquant le numéro de l'élément me sert à récupérer les données de l'élément que j'ai extraites de la base de données.
Grace à idElement, l'utilisateur peut ensuite modifier ou supprimer l'élément sur lequel il a cliqué.
Merci de ton aide. Je respire.

[Invité]

Alors utilise le bon attribut.

Pas name, mais data-xxxx :

Code :

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

<... data-machin="0"...>

En jQuery, ça se récupère avec :

Code :

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

$('#elementx').data('machin');

Ou

Code :

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

$('#elementx').attr('data-machin');

• .data()
• .attr()

[fredericmarcel]

Merci. Je vais essayer d'incrémenter l'attribut "data-machin" à chaque fois que je clone un élément.
Bon dimanche électoral

[fredericmarcel]

Bonjour,
Je suis à nouveau bloqué.
Lorsque j'ai cloné le div "element", je voudrais que l'utilisateur clique sur un des deux enfants "porteVisuNom" ou "porteNiveau" pour pouvoir modifier leur valeur.
Dans le code JS ci-dessous, il me suffit de créer une alert qui affiche "Ceci est un porteVisuNom" ou "Ceci est un porte-niveau".
Mais lorsqu'on clique sur "porteVisuNom" ou "porteNiveau", il ne se passe rien.
Cela fonctionnait bien lorsque je ne clonais pas les éléments, mais que je les avais créés dans le HTML (element1.....element15)
Où est l'erreur ?
Merci de ton aide.

PHP

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
           <div id="element"  data-numero=0 data-nom="Element 0" class="element">
                 <div class="porteVisuNom">
                    <p  class="visuNom"></p>
                </div>   
                <div  class="porteNiveau"  name="1">  
                    <div class="niveau" data-niveau=150></div> 
                </div>   
         </div> 
 
          <div id="visu">  </div>
        <button id="clone">clone</button>

JS

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
27
28
29
30
 
  $(document).ready(function(){ 
    var totalElements=0;
       $("#element").hide();
  $("#clone").click(function(){
        $(".porteVisuNom").css("border", "7px solid blue") 
      totalElements++;
       //alert(totalElements)
      $("#element").clone().attr('id','element' +totalElements).appendTo("#visu").hide().fadeIn(2200, 'swing');
      var leNom = "Objectif " + totalElements
      //  alert(leNom)
      $("#element" + totalElements + " .visuNom").html("Objectif " + totalElements)
 
         $(".element + ".porteVisuNom").click(function() { 
                 alert("Ceci est un porteVisuNom")
           } 
          }); 
           $(".element + ".porteNiveau").click(function() { 
                 alert("Ceci est un porteNiveau")
           }
 
          }); 
 
 
 
 
 
 
 
});//document ready

[Invité]

Bonjour,

regarde la coloration de ton code...

Tu as des erreurs de syntaxe :

Code :

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

$(".element + ".porteVisuNom")....

devient

Code :

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

$(".element .porteVisuNom")....

• il manque plusieurs ";" en fin de lignes (pas grave, mais c'est mieux de les mettre)
• il y a aussi des "}" en trop ou mal placés

Bref : SOIGNE la syntaxe et l'INDENTATION !

Code jQuery :

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
$(document).ready(function(){ 
	var totalElements=0;
	$("#element").hide();
 
	$("#clone").click(function(){
		$(".porteVisuNom").css("border", "7px solid blue") 
		totalElements++;
		//alert(totalElements)
		var newId = 'element' + totalElements;
		$("#element").clone().attr('id',newId).appendTo("#visu").hide().fadeIn(2200, 'swing');
 
		$("#" + newId + " .visuNom").html("Objectif " + totalElements);
 
		$(".element .porteVisuNom").click(function() { 
			alert("Ceci est un porteVisuNom");
		}); 
		$(".element .porteNiveau").click(function() { 
			alert("Ceci est un porteNiveau")
		}); 
	});
});//document ready

[fredericmarcel]

Voici mon code dans mon appli
Le clonage marche bien;
Le html "Objectif " + totalElements marche bien;
Mais pas les clics sur "PorteVisuNom" et "PorteNiveau".

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
 
$(document).ready(function(){ 
 
    var totalElements=0;
       $("#element").hide();
  $("#clone").click(function(){
      totalElements++;
      $("#element").clone().attr('id','element' +totalElements).appendTo("#visu").hide().fadeIn(2200, 'swing');
      var leNom = "Objectif " + totalElements
      $("#element" + totalElements + " .visuNom").html("Objectif " + totalElements)       
    }); 
 
     $(".element" + ".porteVisuNom").click(function() { 
           alert("Ceci est un porteVisuNom");
      }); 
     $(".element" + ".porteVisuNom").click(function() { 
           alert("Ceci est un porteVisuNom");
      }); 
 
 
});//document ready

[Invité]

1/ Je t'ai mis le code !

-> Il suffit de faire un copier-coller !!


2/ Mais bon... Explication de TON erreur :

Code :

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

     $(".element" + ".porteVisuNom").click(function() {

équivaut à :

Code :

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

     $(".element.porteVisuNom").click(function() {

Il manque donc un ESPACE :

Code :

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

     $(".element" + " .porteVisuNom").click(function() {

[fredericmarcel]

Ca marche.
Mais seulement si je les mets à l'intérieur de

Code :

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

1
2
 $("#clone").click(function(){
});

Merci de m'avoir aidé à franchir cet obstacle.
Cordialement.
Frédéric

[Invité]

...Mais seulement si je les mets à l'intérieur ...

Oui, car ils n'existent pas dans le DOM au départ.

Pour les mettre à l'extérieur (et pour tout élément créés après), il faut s'accrocher à un élément existant au départ.

La syntaxe :

Code :

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

     $('body').on( 'click', '.element .porteVisuNom', function() {

[fredericmarcel]

Ce code ne marche pas. Il ne se passe rien quand je clique

Code :

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

1
2
3
4
 
       $('body').on( 'click', '.element .porteVisuNom', function() {
                alert("Ceci est un porteVisuNom");
      });

[Invité]

Et pourtant... si.

[fredericmarcel]

Non. J'ai réessayé une dizaine de fois.
Tant pis, je vais me débrouiller en mettant tout le code dans $("#clone").click(function(){

[Invité]

"Tant pis" n'est pas une réponse acceptable !


Ce n'est pourtant pas difficile de MONTRER ton code.

Je pourrais te dire où est l'erreur...

[fredericmarcel]

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
 
     $(document).ready(function(){ 
 
    var totalElements=0;
   // alert(totalElements)
      // $("#element").hide();
  $("#clone").click(function(){
           totalElements++;
          $("#element").clone().attr('id','element' +totalElements).appendTo("#visu").hide().fadeIn(2200, 'swing');
          var leNom = "Objectif " + totalElements
         $("#element" + totalElements + " .visuNom").html("Objectif " + totalElements)
     }); 
 
 
       $('body').on( 'click', '.element .porteVisuNom', function() {
                alert("Ceci est un porteVisuNom");
      }); 
 
        $('body').on( 'click', '.element .porteNiveau', function() {
                alert("Ceci est un porteNiveau");
      }); 
 
});//document ready

[Invité]

Ca fonctionne :

• https://codepen.io/jreaux62/pen/PmEbvJ

N.B. Pour info : LA MOINDRE erreur dans un code JavaScript fait planter TOUT le code.
Donc : l'erreur est peut-être ailleurs (dans un bout de code que tu ne montres pas)

[fredericmarcel]

Je vais tester ton code demain matin.
Il fonctionne bien dans ton codepen.
Bonne soirée.

[fredericmarcel]

Grand mystère.
Ton code fonctionne parfaitement sur mon pc.
Mais sur mon ipad, si je clique porteNiveau ou porteVisuNom, l'alerte ne s'affiche pas.
Or mon appli est destinée principalement aux tablettes.

Par contre, ceci fonctionne parfaitement. Mais cela m'oblige à écrire toutes les fonctions qui vont suivre à l'intérieur de $("#clone").click(function() {
A moins que je puisse passer le clone en paramètre dans une fonction en dehors de la fonction qui crée le clone ?

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
 
$("#clone").click(function() {
    totalElements++;
    $("#element")
      .clone()
      .attr("id", "element" + totalElements)
      .appendTo("#visu")
      .hide()
      .fadeIn(2200, "swing");
    var leNom = "Objectif " + totalElements;
    $("#element" + totalElements + " .visuNom").html(
      "Objectif " + totalElements
    );
       $(".element" + " .porteVisuNom").click(function() {
           alert("Ceci est un porteVisuNom");
      });
      $(".element" + " .porteNiveau").click(function() {
           alert("Ceci est un porteNiveau");
      });
  });

[fredericmarcel]

Le mystère est résolu : j'ai ajouté "touchstart " à click.

Code :

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

1
2
3
4
 
$("body").on("click touchstart", ".element .porteVisuNom", function() {
    alert("Ceci est un porteVisuNom");
  });

Merci beaucoup de ton aide Jérôme. Je peux maintenant adapter mon appli en clonant les éléments ce qui permettra à l'utilisateur de les créer dynamiquement.
Bien cordialement.
Frédéric