J'essaie de l'avoir quand je clique sur "Ajouter un exercice", un nouveau div bootstrap pliable sera ajouté à l'intérieur de mon div de carte. chaque fois que le bouton est cliqué. J'essaie depuis un certain temps maintenant et je lis d'autres questions ici, mais je n'arrive pas à le faire fonctionner.

J'ai ajouté mon code à jsfiddle. Quelqu'un peut-il m'aider à faire enfin fonctionner cela?

https://jsfiddle.net/dmngpo8e/4/

$('input[name="queue"]').click(function() {
  $("<div class='panel-group'><div class='panel panel-default'><div class='panel-heading'><h4 class='panel-title'><a data-toggle='collapse' href='#collapse1'>Collapsible panel</a></h4></div><div id='collapse1' class='panel-collapse collapse'><div class='panel-body'>Panel Body</div><div class='panel-footer'>Panel Footer</div></div></div></div>").html('item').appendTo('card');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<input class="btn teach_edit_header_buttons" style="font-family:Helvetica" name="queue" type="submit" value="Add Exercise">


<div class="card" style="padding:10px;background-color:#c7e0fc;">
</div>
0
d3t0x 16 avril 2018 à 18:59

3 réponses

Meilleure réponse

.appendTo('card'); devrait être .appendTo('.card'); .. et en utilisant html('item') avant cela, il suffira de changer tout le code html div avec le mot item donc vous devez supprimer html('item')

3
Mohamed-Yousef 16 avril 2018 à 16:03

Comme @bkr et @ Mohamed-Yousef l'ont déjà mentionné, vous avez eu quelques problèmes avec votre code:

  1. Supprimez .html('item') car il écrase la div bootstrap pliable.
  2. Il vous manquait un point dans .appendTo('card'), devrait être .appendTo('.card').
  3. De plus, pour que le bouton pliable fonctionne après l'avoir ajouté, vous avez également besoin du fichier Bootstrap JS, sinon les divs de bootstrap pliable ne fonctionneront pas (voir le code ci-dessous).
$('input[name="queue"]').click(function() {
  $("<div class='panel-group'><div class='panel panel-default'><div class='panel-heading'><h4 class='panel-title'><a data-toggle='collapse' href='#collapse1'>Collapsible panel</a></h4></div><div id='collapse1' class='panel-collapse collapse'><div class='panel-body'>Panel Body</div><div class='panel-footer'>Panel Footer</div></div></div></div>").appendTo('.card');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<input class="btn teach_edit_header_buttons" style="font-family:Helvetica" name="queue" type="submit" value="Add Exercise">


<div class="card" style="padding:10px;background-color:#c7e0fc;">
</div>
0
cabrerahector 16 avril 2018 à 16:16

Essayez en ajoutant un point (sélecteur de classe) avant card

$('input[name="queue"]').click(function() {
  $("<div class='panel-group'>" +
    "<div class='panel panel-default'>" +
    "<div class='panel-heading'>" +
    "<h4 class='panel-title'>" +
    "<a data-toggle='collapse' href='#collapse1'>Collapsible panel</a>" +
    "</h4>" +
    "</div>" +
    "<div id='collapse1' class='panel-collapse collapse'>" +
    "<div class='panel-body'>Panel Body</div>" +
    "<div class='panel-footer'>Panel Footer</div>" +
    "</div>" +
    "</div>" +
    "</div>").html('item').appendTo('.card');
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->



<input class="btn teach_edit_header_buttons" style="font-family:Helvetica" name="queue" type="submit" value="Add Exercise">


<div class="card" style="padding:10px;background-color:#c7e0fc;">
</div>
1
brk 16 avril 2018 à 16:03