使用 Bootstrap 以错误的方式动态添加面板

Question

我在 Bootstrap 中使用了 Collapse 面板，它以静态方式工作正常，但是当我尝试动态添加它时它不起作用。

HTML

 <form>
    <div class="form-group" >
      <label for="comment">Comment:</label>
      <textarea class="form-control" rows="5" id="comment"></textarea> 
      </div>
     <div style="float: right;"> <input type="button" class="btn btn-info" value="Add Question" id="AddQuestId"></div>       
  </form>

<div class="panel-group" id="accordion">
      <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseEleven">What is the currency used for all transactions?</a>
                    </h4>
                </div>
                <div id="collapseEleven" class="panel-collapse collapse">
                    <div class="panel-body">
                        All prices for themes, templates and other items, including each seller's or buyer's account balance are in <strong>USD</strong>
                    </div>
                </div>
            </div>

</div>

JavaScript

$( "#AddQuestId" ).click(function() {
    $("#accordion").append('<div class="panel panel-default">'+
    '<div class="panel-heading">'+
    '<h4 class="panel-title"> '+
    '<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse14">'+$("#comment").val()+'</a>  </h4>'+
    '</div>'+
    '<div id="collapse14" class="panel-collapse collapse in">'+
    '<div class="panel-body">'+
    'Account registration at <strong>PrepBootstrap</strong>'+
    '</div>'+
    '</div>'+
     '</div>'+
    '</h4>'+
     '</div>');
});

Answer 1

无需用javascript编写整个折叠面板代码。只需使用 HTML DOM 来填充动态内容。一个这样的例子是，如果您想在面板正文中填充一些动态内容：

<div class="panel-body">
  <p id = "description"> All prices for themes, templates and other items, including each seller's or buyer's account balance are in <strong>USD</strong> </p>
</div>

这里是javascript代码：

$( "#AddQuestId" ).click(function() {
document.getElementById("description").innerHTML = "Account registration at PrepBootstrap";
document.getElementById("id").innerHTML = comment;
    });

在第三行中，我将面板标题的 ID 设为“id”