Bootstrap гармошка динамически создается не разрушаясь

Question

У меня есть ajax-вызов PHP-скрипта, который возвращает данные, которые я пытаюсь загрузить в аккордеон Boostrap.

Аккордеон успешно открывает каждую карту при нажатии, но я не могу закрыть их.

Есть ли известные проблемы при динамическом создании аккордеонов таким образом, или что-то не так с моим кодом?

Это вызов ajax ...

    $.ajax({
      url: 'php/getservices.php',
      dataType: 'json',
      method: 'GET',
      success: function(data) {
        $('#existing-services-list').empty();
        $('#existing-services-list').append('<div class="accordion" id="accordionExample">');
        var data = data;
        for(i=0; i<data.length; i++) {
              var serviceid = data[i].SERVICEID;
              var servicename = data[i].SERVICENAME;
              var serviceurl = data[i].SERVICEURL;
              $('#existing-services-list').append('<div class="card"><div class="card-header" id="heading' + serviceid + '"><h5 class="mb-0"><button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse' + serviceid + '" aria-expanded="true" aria-controls="collapse' + serviceid + '">' + servicename + '</button></h5></div><div id="collapse' + serviceid + '" class="collapse" aria-labelledby="heading' + serviceid + '" data-parent="#accordionExample"><div class="card-body">' + serviceurl + '</div></div></div>');
        }
        $('#existing-services-list').append('</div>');
      }
    });

Answer 1

Кажется, что атрибут aria-controls и aria-labelledby не совпадают.

Сохраните одно и то же имя и идентификатор в обоих.

Пожалуйста, внесите подобные изменения и дайте мне знать, Это работает или нет?

Answer 2

Я бы сделал это следующим образом https://jsfiddle.net/5r2t7a8b/

Там, где div аккордеона уже доступен в DOM и каждый элемент просто добавляется в аккордеон.

HTML:

<div id="existing-services-list">
<div class="accordion" id="accordionExample">
</div>
</div>

JQuery:

$.ajax({
      url: 'https://jsonplaceholder.typicode.com/posts',
      dataType: 'json',
      method: 'GET',
      success: function(data) {
      console.log(data);
        $('#accordionExample').empty();
        for(i=0; i<data.length; i++) {
              var serviceid = data[i].id;
              var servicename = data[i].title;
              var serviceurl = data[i].body;
              $('#accordionExample').append('<div class="card"><div class="card-header" id="heading' + serviceid + '"><h5 class="mb-0"><button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse' + serviceid + '" aria-controls="collapse' + serviceid + '">' + servicename + '</button></h5></div><div id="collapse' + serviceid + '" class="collapse" aria-labelledby="heading' + serviceid + '" data-parent="#accordionExample"><div class="card-body">' + serviceurl + '</div></div></div>');
              }
      }
    });