I am currently working on dynamically adding elements to an HTML page while also implementing the bootstrap 3.2 css.
Below is the jquery function that I am using:
$( document ).ready(function() {
$(".refresh-btn").click(function (){
$("<div></div>").attr("class","row new").appendTo('.Item-List');
$("<div></div>").attr("class","col-sm-3").appendTo('.Item-List .new');
$("<div></div>").attr("class","panel panel-default").appendTo('.Item-List .new .col-sm-3');
$("<div></div>").attr("class","panel-headingt").appendTo('.Item-List .row .col-sm-3 .panel-default');
$("<h3></h3>").attr("class","panel-title").text("Panel title").appendTo('.Item-List .new .col-sm-3 .panel-default .panel-headingt');
$("<div></div>").attr("class","panel-body").text("Panel content").appendTo('.Item-List .new .col-sm-3 .panel-default');
$("<button></button>").attr("type","button").attr("class","btn btn-default btn-sm").attr("id","proccesing-btn").appendTo('.Item-List .new .col-sm-3 .panel-default');
})
});
The purpose of this function is to replicate and add the following code dynamically:
<div class="row">
<div class="col-sm-3">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">Panel content</div>
<button type="button" class="btn btn-default btn-sm"
id="proccesing-btn">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
</div>
</div>
</div>
Although everything seems fine, the issue I'm encountering is that the newly added elements are not applying the css: