Bootstrap添加内容以动态折叠不能正常工作

Question

我的问题是使用jquery添加图像到bootstrap崩溃不能按预期工作。请看下面的图片，

HTML

<div class="panel box box-primary">
    <div class="box-header">
        <h4 class="panel-title box-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                Deal Extra Images
            </a>
        </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
        <div class="panel-body">
            <!-- Adding deal extra images here -->
            <div class="extra-images">
            </div>
        </div>
        <div class="box-footer">
            <button type="button" class="btn bg-maroon margin" id="exImgSave">Save Changes</button>
        </div>
    </div>
</div>

Jquery用于将图像添加到div-＆gt;额外图像

if(data.extra_images != null) {
    $.each(data.extra_images, function(i, item) {
        var divImg = '<div class="image" id="'+item.id+'"><a href="#" class="delete"><img src="<?php echo base_url('assets/uploads') ?>/'+item.image+'" alt="Thumb-Title">'+
            '<span class="play"></span></a></div>';
        $(".extra-images").append(divImg);
    });
}