Append avec Class et Id

**Arsene12** · 20/08/2016, 19h12

Bonjour,

Quelqu'un pourrait-il me dire comment faire pour que le deuxième click fonctionne?
(Il faut d'abord cliquer sur le bouton puis sur le mot.)

http://jsfiddle.net/FqffM/658/

Merci d'avance.

**danielhagnoul** · 20/08/2016, 21h53

Voir : Différences entre on() avec 1 ou 2 sélecteurs

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/le-frog/jquery-ui.min.css">
  <style>
    .clickable {
      margin-left: 1.2rem;
    }
  </style>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/i18n/jquery-ui-i18n.min.js"></script>
  <script>
    'use strict';
 
    $( function(){
 
      let jObjListeMot = $( "#ListeMot" );
 
      $( "#Action" ).one( "click", function( ev ){
        jObjListeMot.append(
          '<span id = "MyWord1" class="clickable">Mot1 </span>',
          '<span id = "MyWord2" class="clickable">Mot2 </span>',
          '<span id = "MyWord3" class="clickable">Mot3 </span>',
          '<span id = "MyWord4" class="clickable">Mot4 </span>',
          '<span id = "MyWord5" class="clickable">Mot5 </span>',
          '<span id = "MyWord6" class="clickable">Mot6 </span>'
        );
 
        jObjListeMot.on( "click", ".clickable", function( ev ){ 
          console.log( this.id );
        });
      });
 
    });
 
    $( window ).on( "load", function( ev ){
 
    });
  </script>
</head>
<body>
  <main>
 
    <div id="ListeMot" >
      <button id="Action">Action</button>
    </div>
 
  </main>
</body>
</html>

**Arsene12** · 21/08/2016, 04h34

Merci beaucoup pour cette aide.
Je voudrais cloner ma liste de mots et conserver la propriété du click sur la deuxième liste.

http://jsfiddle.net/FqffM/660/

Pourriez vous me dire s'il vous plait, comment je dois m'y prendre?
Merci.

Cordialement,

Arsène

**Arsene12** · 21/08/2016, 06h08

J'y suis presque. Y'a juste plus qu'à à utiliser For (i=1; i<Nbre+1;i++) ;

http://jsfiddle.net/FqffM/661/

ça marche pour 1 seul :

http://jsfiddle.net/FqffM/664/

mais pas pour plusieurs :

http://jsfiddle.net/FqffM/665/

Invité · 21/08/2016, 09h42

Bonjour,

comme tu ne fournis pas de réelle explication,...

... voilà ce que j'ai cru comprendre :

Code :

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

1
2
3
<input name="Action" id="Action" type="button" value="Action" /><br>
<div id="ListeMot" ></div>
<div id="ListeMot2" ></div>

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
$( "#Action" ).one( "click", function( ev ){
 
	// 1/ on cre la liste de mot
	 // chaque mot est 
	$( "#ListeMot" ).append(
	'<span data-id="1" class="clickable">Mot1 </span>',
	'<span data-id="2" class="clickable">Mot2 </span>',
	'<span data-id="3" class="clickable">Mot3 </span>',
	'<span data-id="4" class="clickable">Mot4 </span>',
	'<span data-id="5" class="clickable">Mot5 </span>',
	'<span data-id="6" class="clickable">Mot6 </span>'
	);
 
	// on compte les data-id
	var idMax = 0;
	$( "#ListeMot .clickable" ).each(function(){
		idMax = Math.max( idMax, $(this).attr('data-id') );
	});
 
	$( "#ListeMot, #ListeMot2" ).on( "click", ".clickable", function( ev ){
		var id = $(this).attr('data-id');
		idMax++; // on incrémente le data-id
		$(this).attr('data-id',idMax); // on applique le data-id max (de l'élément en cours) avant clonage
		$(this).clone().appendTo("#ListeMot2"); // on clone (avec le nouveau data-id max)
		$(this).attr('data-id',id); // on rétablit le data-id de l'élément en cours à sa valeur initiale
	});
 
});

**danielhagnoul** · 21/08/2016, 10h35

Envoyé par Arsene12

[...] Je voudrais cloner ma liste de mots et conserver la propriété du click sur la deuxième liste. [...]

Presque bon !

Comme vous insérez le clone après (insertAfter) jObjListeMot, il faut placer le gestionnaire d'événement sur l'élément supérieur dans le DOM, ce sera "body" :

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
let jObjListeMot = $( "#ListeMot" );
 
$( "#Action" ).one( "click", function( ev ){
jObjListeMot.append(
  '<span class="clickable">Mot1 </span>',
  '<span class="clickable">Mot2 </span>',
  '<span class="clickable">Mot3 </span>',
  '<span class="clickable">Mot4 </span>',
  '<span class="clickable">Mot5 </span>',
  '<span class="clickable">Mot6 </span>'
);
 
$( "body" ).on( "click", ".clickable", function( ev ){ 
  console.log( ev.target );
});
 
$( ".clickable" )
  .clone( true, true )
  .insertAfter( jObjListeMot );
 
});

**Arsene12** · 21/08/2016, 11h03

Merci pour le code mais c'est pas tout à fait ce que je voulais faire.

Je voulais d'abord cloner tous les éléments de la Div1 dans la Div2.
J'y étais arrivé :

http://jsfiddle.net/FqffM/670/

Mais ce que je voulais surtout c'était conserver les Id et les values.
C'est pourquoi je voulais qu'en cliquant sur les clones une alert m'affiche leurs Id ou leurs values.

Et j'ai trouvé la solution :

http://jsfiddle.net/FqffM/671/

Je me sers de la class pour cloner tous les éléments.

Je clique de suite sur Résolu.

**danielhagnoul** · 21/08/2016, 11h10

Non ! J'ai été trop vite !

Un ID doit être unique dans la page web, impossible de cloner simplement des éléments avec ID.

Invité · 21/08/2016, 11h21

Euhhh... personne n'a testé mon bout de code ?

Envoyé par Arsene12

...conserver les Id et les values...

Non. Les id, ce n'est pas possible. Un id est UNIQUE.

C'est pourquoi j'ai utiliser des data-id.

N.B. On peut toujours utiliser un data-name (qui, lui, peut être le même pour le clone)

Mais tu n'as toujours pas expliquer à QUOI ça devait servir...
Ca aiderait à trouver une solution fonctionnelle et adaptée !

**Arsene12** · 21/08/2016, 12h07

Bien sûr que j'ai testé :

http://jsfiddle.net/FqffM/669/

J'ai crée une application qui importe avec ajax des données dans une div.
Ces données je cherche à les cloner dans une deuxième div.

Le problème c'est que j'arrive pas à transposer ma solution Fiddle dans mon appli.

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
 
 
function maFonction(){
 
	mondata = {Data1: arg1, Data2: arg2, Data3: arg3}, 
           $.ajax({
	 url:'http://xxxxxx.php',
	 type:'post',     
	 data: mondata,     
	 dataType:'json',
 
	 success: function(data) {
         i=1
	 if(data.success){
 
	$.each(data, function(index,record){ 
 
        $('#Div1').append('<span id = "MyWord'+i+'" class="clickable"  >' +record.Numero + '</span>');
 
 
	$("#MyWord"+i).clone().attr({id:$("#MyWord"+i).id,class:"clickable"}).appendTo("#Div2");
 
///////////////////////////////////////  La 1ère solution marche partiellement //////////////////////////
 
        //$("#MyWord"+i).on('click', function () {    // ça marche mais que pour la Div1
        //$( ".clickable" ).on( "click", function(){      // ça marche pas
	$( ".clickable" ).on( "click", function( ev ){  // ça marche pas
 
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
		alert("OK")
 
   		     });
 
		});
	    };
	};
    });
};
 
    $( window ).on( "load", function( ev ){
 
    });

;

**Arsene12** · 21/08/2016, 12h29

Citation Envoyé par danielhagnoul Voir le message

Un ID doit être unique dans la page web, impossible de cloner simplement des éléments avec ID.

Je suis arrivé à conserver l'Id et ça marche :

http://jsfiddle.net/FqffM/673/

Je voudrai que si l'on clique sur un élément, son clone se colore aussi.

Invité · 21/08/2016, 13h15

"Conserver" les id n'est pas le problème.

Comprends-tu : "Un id est et DOIT ETRE UNIQUE" ?

Envoyé par jreaux62

C'est pourquoi j'ai utiliser des data-id

**Arsene12** · 21/08/2016, 14h32

Code :

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

1
2
3
 Citation Envoyé par danielhagnoul Voir le message

Comme vous insérez le clone après (insertAfter) jObjListeMot, il faut placer le gestionnaire d'événement sur l'élément supérieur dans le DOM, ce sera "body"

http://jsfiddle.net/FqffM/676/

j'ai testé le code, j'ai même remplacé insertAfter par appendTo, j'obtiens undefined quand je clique sur le mot pour avoir son identifiant :

**Toufik83** · 21/08/2016, 16h31

1-normal que tu as "undefined" dans l'alerte par-ce-que tu n'as pas mis des ID pour tes éléments initiales class="cklickable".
2- pour avoir un id d'un élément en jQuery, on fait $(element).attr("id") et non pas $(element).id.
d'après ce que j'ai compris, c'est que tu veux attribuer des ID juste aux éléments clonés, et non pas aux éléments initiales, pour cela, tu peux attribuer un id unique pour chaque élément cloné dans un each.

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
 
let jObjListeMot = $( "#ListeMot" );
let jObjListeMot2 = $( "#ListeMot2" );
 
$( "#Action" ).one( "click", function( ev ){
jObjListeMot.append(
  '<span class="clickable">Mot1 </span>',
  '<span class="clickable">Mot2 </span>',
  '<span class="clickable">Mot3 </span>',
  '<span class="clickable">Mot4 </span>',
  '<span class="clickable">Mot5 </span>',
  '<span class="clickable">Mot6 </span>'
);
$( "body" ).on( "click", ".clickable", function( ev ){ 
  console.log( ev.target );
});
 
$( ".clickable" )
.each(function(i){
	$(this)
	.clone( true, true )
	.attr("id","ID"+(i+1))
	.appendTo( jObjListeMot2 );
});
 
$(".clickable").on( "click", function( ){
  alert($(this).attr("id"));
});
 
 
});

**Arsene12** · 22/08/2016, 06h32

Je vous remercie pour cette solution. C'est exactement le code qu'il me fallait.

http://jsfiddle.net/FqffM/682/

Merci Beaucoup.

:

Append avec Class et Id

jQuery

Discussions similaires

Partager

Partager