Question

当我点击“添加练习”时，我试图拥有它，一个新的可折叠引导div将被添加到我的卡片div中。每次单击按钮。我已经尝试了一段时间并在这里阅读其他问题，但我似乎无法让它工作。

我将我的代码添加到jsfiddle。 Cany有人帮我终于搞定了吗？

$('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>

Answer 1

.appendTo('card');应该是.appendTo('.card'); ..并且在它之前使用html('item')它只会使用单词item更改整个div html，因此您需要删除{{ 1}}

Answer 2

尝试在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>

Answer 3

正如@bkr和@ Mohamed-Yousef已经提到过的，你的代码存在一些问题：

删除.html('item')，因为它覆盖了可折叠的bootstrap div。
您在.appendTo('card')中遗漏了一个点，应为.appendTo('.card')。
此外，为了使折叠按钮在添加后能够正常工作，您还需要Bootstrap的JS文件，否则可折叠的bootstrap div将无效（请参阅下面的代码）。

$('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>

动态地将div添加到另一个div

3 个答案: