Discussion :

[FCL31]

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

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

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 :

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

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

[NoSmoking]

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

[FCL31]

Merci pour ta réponse.

Excuse moi mais je comprend trop ta réponse 🤔

[NoSmoking]

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

[FCL31]

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.

[NoSmoking]

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 :

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

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