Append avec Class et Id

Version imprimable

20/08/2016, 19h12
Arsene12

Append avec Class et Id

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.

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

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

21/08/2016, 04h34
Arsene12

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
21/08/2016, 06h08
Arsene12

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/

Bonjour,

comme tu ne fournis pas de réelle explication,... :koi: ... voilà ce que j'ai cru comprendre :

Code:

1
2
3
<input name="Action" id="Action" type="button" value="Action" /><br>
<div id="ListeMot" ></div>
<div id="ListeMot2" ></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
$( "#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
	});
 
});

Citation:

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:

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( 'Mot1 ', 'Mot2 ', 'Mot3 ', 'Mot4 ', 'Mot5 ', 'Mot6 ' ); $( "body" ).on( "click", ".clickable", function( ev ){ console.log( ev.target ); }); $( ".clickable" ) .clone( true, true ) .insertAfter( jObjListeMot ); });

21/08/2016, 11h03
Arsene12

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. :D

Je clique de suite sur Résolu. :P
21/08/2016, 11h10
danielhagnoul

Non ! J'ai été trop vite ! :oops:

Un ID doit être unique dans la page web, impossible de cloner simplement des éléments avec ID.
21/08/2016, 11h21
Invité

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

Citation:

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 !

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:

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 ){
 
    });

;

21/08/2016, 12h29
Arsene12

Citation:

:mrgreen: 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.
21/08/2016, 13h15
Invité

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

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

Citation:

Envoyé par jreaux62

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

Code:

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 :

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:

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( 'Mot1 ', 'Mot2 ', 'Mot3 ', 'Mot4 ', 'Mot5 ', 'Mot6 ' ); $( "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")); }); });

22/08/2016, 06h32
Arsene12

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

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

Merci Beaucoup. :D: