Bootstrap 使用 ajax 调用创建的手风琴未正确显示

Question

我从 bootstrap 手动创建手风琴没问题。

但是在 ajax 调用中它没有正确呈现。

我的 ajax 电话：

function LoadReservation() {
    $.ajax({
        url: '@ecuriePath' + 'MesReservations',
        type: 'GET',
        headers: headers,
        success: function (data) {
            var j = 1;
            $.each(data,
                function (i, v) {
                    $('#accordion').append('<div class="panel panel-default">');
                    $('#accordion').append('<div class="panel-heading">');
                    $('#accordion').append('<h4 class="panel-title">');
                    $('#accordion').append('<a data-toggle="collapse" data-parent="#accordion" href="#collapse'+j+'">'+moment(v.heureDebut).format("DD-MM-YYYY")+' : '+v.typeDeCours+' - '+v.discipline+'</a>');
                    $('#accordion').append('</h4>');
                    $('#accordion').append('</div>');
                    $('#accordion').append('<div id="collapse'+j+'" class="panel-collapse collapse in">');
                    $('#accordion').append('<div class="panel-body">');
                    $('#accordion').append('test'+j);
                    $('#accordion').append('</div>');
                    $('#accordion').append('</div>');
                    $('#accordion').append('</div>');
                    j = j + 1;
                });
        },
        error: function(error) {
            alert('failed : ' + error);
        }
    });
}

HTML 和参考文献：

<link rel="stylesheet" href="~/Content/bootstrap.min.css">
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"> 
</script>

<div class="container">
<div id="accordion"></div>
</div>

这是结果：

有人知道这是为什么吗？直接在 html 中使用相同的代码效果很好，并给出以下结果：

Answer 1

我找到它不起作用的原因了。

Jquery .append() 函数附加您的 html 但也会自动关闭标签。

如果您附加以下内容：

$('#accordion').append('<div class="panel panel-default">');

它会在它的末尾添加一个</div>。

我把所有东西都放在一个数组中并附加了我的数组。这成功了！

Bootstrap 使用 ajax 调用创建的手风琴未正确显示

Bootstrap accordion not showing correctly when created with ajax call

html

ajax

accordion

twitter-bootstrap