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

Question

我使用了Collapse面板和Bootstrap，它在静态方式下运行良好，但是当我尝试动态添加它时它没有用。

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作为＆＃34; id＆＃34;