从AJAX创建时冻结引导程序

Question

实际上，在我的网站上，当打开一个依据时，我会动态地填充依据引导，一旦打开，就会保存数据。

问题是，当我第一次打开该控件时，它冻结了（因为它必须附加很多div），这触发了我很多东西，所以我知道如何使它更可执行或喜欢哪种方法我应该采取预防冻结的措施。

AJAX方法的构建如下：

function getBody(body, key) {

    $.ajax({
        type: "POST",
        url: "casse.aspx/getBody",
        data: JSON.stringify({ key: key }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {

            data = r.d;
            data = $.parseJSON(data);

            $.each(data, function (i, item) {

                var piva = item.piva;
                var desmag = item.desmag;
                var via = item.via;
                var loc = item.loc;
                var servb2b = item.servb2b;
                var idtrabb2b = item.idtrabb2b;
                var matricola = item.matricola;
                var azzer = item.azzer;
                var mac = item.mac;
                var vp = item.vp;
                var vb = item.vb;
                var dr = item.dr;
                var vu = item.vu;
                var cpu = item.cpu;
                var rt = item.giart;
                var datart = item.avviort;

                var card = "";

                card += '<div class="row ml-2 mr-2">';
                card += '<div class="col">';
                card += '<div class="row"><span class="badge badge-primary">Cliente</span></div>';
                card += '<div class="row"><small class="text-muted">P.Iva</small></div>';
                card += '<div class="row"><p class="info">' + piva + '</p></div>';
                card += '<div class="row"><small class="text-muted">Info Negozio</small></div>';
                card += '<div class="row"><p class="info">' + desmag + '</p></div>';
                card += '<div class="row"><small class="text-muted">Via</small></div>';
                card += '<div class="row"><p class="info">' + via + '</p></div>';
                card += '<div class="row"><small class="text-muted">Localita</small></div>';
                card += '<div class="row"><p class="info">' + loc + '</p></div></div>';

                card += '<div class="col">';
                card += '<div class="row"><span class="badge badge-primary">Software</span></div>';
                card += '<div class="row"><small class="text-muted">VisualPos</small></div>';
                card += '<div class="row"><a href="#" class="badge badge-warning">' + vp + '</a></div>';
                card += '<div class="row"><small class="text-muted">VisualB2B</small></div>';
                card += '<div class="row"><a href="#" class="badge badge-warning">' + vb + '</a></div>';
                card += '<div class="row"><small class="text-muted">Driver</small></div>';
                card += '<div class="row"><a href="#" class="badge badge-warning">' + dr + '</a></div>';
                card += '<div class="row"><small class="text-muted">VisualUpdate</small></div>';
                card += '<div class="row"><p class="info">' + vu + '</p></div></div>';

                card += '<div class="col">';
                card += '<div class="row"><span class="badge badge-primary">Fiscale</span></div>';
                card += '<div class="row"><small class="text-muted">Matricola</small></div>';
                card += '<div class="row"><p class="info">' + matricola + '</p></div>';
                card += '<div class="row"><small class="text-muted">Azzeramento Fiscale</small></div>';
                card += '<div class="row"><p class="info">' + azzer + '</p></div>';
                card += '<div class="row"><small class="text-muted">RT</small></div>';
                card += '<div class="row"><p class="info">' + rt + '</p></div>';
                card += '<div class="row"><small class="text-muted">Data Avvio RT</small></div>';
                card += '<div class="row"><p class="info">' + datart + '</p></div></div>';

                card += '<div class="col">';
                card += '<div class="row"><span class="badge badge-primary">Fatturazione Elettronica</span></div>';
                card += '<div class="row"><small class="text-muted">Servizio B2B</small></div>';
                card += '<div class="row"><p class="info">' + servb2b + '</p></div>';
                card += '<div class="row"><small class="text-muted">Trasmittente B2B</small></div>';
                card += '<div class="row"><p class="info">' + idtrabb2b + '</p></div></div>';

                card += '<div class="col">';
                card += '<div class="row"><span class="badge badge-primary">Hardware</span></div>';
                card += '<div class="row"><small class="text-muted">CPU</small></div>';
                card += '<div class="row"><p class="info">' + cpu + '</p></div>';
                card += '<div class="row"><small class="text-muted">MAC</small></div>';
                card += '<div class="row"><p class="info">' + mac + '</p></div></div></div>';

                $(body).find('.card-body').append(card);
            });

        },
        error: function (error) {
            OnFailure(error);
            alert('Error');
        }
    });
}

并在触发条件触发时调用

$('.accordion').on('show.bs.collapse', function (e) {
    var id = $(e.target).attr('id');
    var item = '#' + $(e.target).attr('id');
    if ($(item).find('.card-body').is(':empty')) {
        getBody(item, id);
    } else {

    }

});

Answer 1

在数据加载完成之后以及将数据放入DOM之后，您将需要手动触发切换。这意味着您需要从“折叠”中删除data-target值，然后手动添加事件侦听器/处理程序。我希望您可以了解折叠前/折叠后的方面，但是没有。

请考虑以下示例，该示例没有您遇到的延迟。

$("#test-button").click(e => {
  $.ajax({
     url: "https://jsonplaceholder.typicode.com/todos",
     dataType: "json"
  }).done(d => {
    $("#collapseOne .card-body").text(JSON.stringify(d
, null, 4));
    $("#collapseOne").collapse("toggle");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button id="test-button" class="btn btn-link" type="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>
    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body"></div>
    </div>
  </div>
</div>