Dupliquer une div dans une autre

Bonjour

J'ai une div .date que je voudrais dupliquer dans ma div #dateCalendar quand je clic sue le lien qui à la classe .valid (un gliphicon dans un lien)

Voici l'HTML et le js.

Code:

---

1 2 3 4 5 6 7 8

<div id="dateCalendar" > <div class="date"> Date : <input type="text" class="mCalendarFR" id="textBox" name="" value=""> <a class="valid glyph" href=""><span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span></a> <a class="del glyph" href=""><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span></a> </div> </div>

---

Code:

---

1 2 3 4 5 6

$(function(){ $(".valid").on("click", function(){ $(".dat").clone().appendTo("#dateCalendar") }) })

---

Malgré plusieurs test et mainte recherche, je n'arrive à rien.

Une petite aide SVP.

Merci d'avance

Bonjour,
$(".dat").clone() ?

Merci pour ta réponse.

Excuse moi mais je comprend trop ta réponse 🤔

Simplement que dans ton code HTML on trouve <div class="date"> !

Ah oui, le boulet ^^

Toutefois, sa marche pas pour autant.

Quand je clique sur le bouton (glyphicon en fait), la div se duplique bien en dessous comme voulu mais disparaît immédiatement.
J'avais déjà réussi ça sans trouver la solution au problème (d'où mes 50 tests différents).

Une idée du pourquoi ??

Même si ces div ne sont pas utilisées dans d'autre js, peut il y avoir des conflits avec d'autres js ??

Merci d'avance.

Citation:

---

Toutefois, sa marche pas pour autant.

---

dans ton code on trouve <a class="valid glyph" href="" ce qui veut dire que ta page est rechargée, il te faut donc inhiber l'action par défaut de la balise <a>, il serait d’ailleurs plus judicieux à mon sens d'utiliser un <button> mais bon !

Le deuxième point est que la copie ne réagira pas car le clonage ne prend pas les événements en compte, sauf si tu passes en paramètre true.
Voir : clone().

Le troisième point est que lors des ajout suivant tu vas dupliquer la première fois une <div> le deuxième fois deux <div> la troisième fois quatre <div> et ainsi de suite. Ce n'est surement pas ce que tu souhaites. Il ne te faut donc faire un clone que de l'élément contenant ta commande d'ajout.
Voir : closest().

Au final ton code devrait plus ressembler à

Code:

---

1 2 3 4

$(".valid").on("click", function(e){ e.preventDefault(); $(this).closest(".date").clone(true).appendTo("#dateCalendar"); })

---

Bonjour.

Nikel

Par contre, j'ai une demande de modification.

Au lieu de rajouter des <input>, il m'a été demandé d'enregistrer les valeurs de l'input dans un tableau (PS : j'ai supprimer le clic sur une balise <a>)

Par conséquent, j'ai fait une <table> et je duplique les <tr>.

HTML

Code:

---

1 2 3 4 5 6 7 8 9 10 11

<table class="table"> <tbody id="tbljours"> <tr class="tbltr"> <td class="tbltd"> truc </td> <td> <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span> </td> </tr> </tbody> </table>

---

jQuery

Code:

---

1 2 3

var $tr = $(".tbltr").clone(); $(".valid").on("click", function(){ $tr.appendTo("#tbljours"); })

---

Mais quand je clique pour ajouter, je ne peux ajouter qu'une seule ligne au tableau malgré plusieurs clic d'ajout.


Je comprend pas pourquoi (surement un truc à la c**).

Une idée ??

Merci d'avance

Il faut que tu comprennes que var $tr = $(".tbltr").clone() te fais une copie de l'élément et que lorsque tu fais $tr.appendTo("#tbljours") tu déplaces la copie donc ... et ... les fois suivantes tu redéplaces cette copie, de là où elle est vers là où elle est, et ainsi de suite.

Il te faut travailler avec une copie de la copie pour garder la copie disponible.

Code:

---

1 2 3 4

var $tr = $(".tbltr").clone(); $(".valid").on("click", function(){ $tr.clone().appendTo("#tbljours"); })

---

Question : combien de fois ai-je copié le mot copie dans ce texte ?

Citation:

---

Envoyé par NoSmoking

Question : combien de fois ai-je copié le mot copie dans ce texte ?

---

Beaucoup de fois :mouarf:


Bon, et dernière petite question j’espère.

J'ai un tableau donc, j'ai une 1ere ligne d'affichée.
Comment ne pas afficher cette 1ere ligne ??

Merci

Citation:

---

Beaucoup de fois :mouarf:

---

Non il y avait un piège la réponse est aucune :mrgreen:

Citation:

---

J'ai un tableau donc, j'ai une 1ere ligne d'affichée.
Comment ne pas afficher cette 1ere ligne ??

---

Il suffit de la mettre en display:none une fois clonée, si c'est fait avant il ne faut oblier de remettre le display au clone sans quoi il ne sera pas visible.

Tu peux faire par exemple :

Code:

---

1 2 3 4 5 6

var oRef = $(".tbltr"); var $tr = oRef.clone(); oRef.hide(); $(".valid").on("click", function(e) { $tr.clone().appendTo("#tbljours"); });

---

ou encore tu peux t'en servir de référence directe

Code:

---

1 2 3 4 5 6

var oRef = $(".tbltr").hide(); $(".valid").on("click", function(e) { oRef.clone().appendTo("#tbljours").css({ "display": "" }); });

---

Désolé pour le retard de la réponse.

Nikel :ccool:

Comme j'avais bien sur des données a traiter dans le tableau, j'ai été obligé de modifier un peut mais bon, aprés un peut de manip, j'ai se que je voulais.

:merci: