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

**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, 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 );
 
});

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

Append avec Class et Id

jQuery

Vue hybride

Discussions similaires

Partager

Partager