使用 ajax 调用创建时，Bootstrap 手风琴显示不正确答案

【问题标题】：Bootstrap accordion not showing correctly when created with ajax call使用 ajax 调用创建时，Bootstrap 手风琴显示不正确
【发布时间】：2020-04-12 06:21:23
【问题描述】：

我从引导程序手动创建手风琴没有问题。

但是在 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 中的相同代码效果很好，并给出以下结果：

【问题讨论】：

标签： html ajax twitter-bootstrap accordion

【解决方案1】：

我找到了为什么它不起作用。

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

如果您附加以下内容：

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

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

我将所有内容都放在一个数组中并附加了我的数组。这成功了！

【讨论】：