DOM 요소는 Ajax로로드 되었음에도 불구하고 산발적으로 생성됩니다.

Question

이것은 매우 특정한 문제이며 특히 혼란 스럽습니다. 짧은 프로젝트 : API에서 데이터를 가져와 AJAX가로드 된 상담 웹 사이트에서 작업하고 있습니다. 이제는 오래된 보관 된 채팅을 미리로드하고 메뉴에서 CSS를 클릭하여 표시하려고합니다.

다음과 같은 문제가 있습니다. 작동하지만 ... 페이지를 3 회 또는 1 회 정도 다시로드 한 후에 만 ​​발생합니다. 나는 그것이 어떻게 될 수 있는지 이해하지 못한다. 체크하고 데이터가 항상로드됩니다 (현재 채팅이 먼저 열리고 항상 작동하기 때문에) 어떻게 그럴 수 있습니까?

$.ajax({ 
    type: 'POST', 
    url: '/vsbt/counselling/archive/', 
    data: {}, 
}).done(function(data) { 
    console.log('ajax /vsbt/counselling/archive/'); 
    console.log(data); 

    //menu is created 
    $('#counselling_status').append('<ul class="archivedCounsellings"></ul>'); 
    $('.archivedCounsellings').append('<h2>Archivierte Chats</h2>') 

    for (var i = 0; i < data.length; i++) { 
     //menu items are added 
     var that = data[i].messages[0].title; 
     $('.archivedCounsellings').append('<li class="' + that + '"><a>' + that + '</a></li>') 
     $('#vbst_communication_container').prepend($('<div class="counselling inactive ' + that + '" />') 
      .append($('<h2>' + that + '<h2>'))); 

     //the messages are added with to classes for styling 
     data[i].messages.forEach(function(message) { 
      $("div." + that) 
       .append($('<div />') 
        .addClass(message.type) 
        .append($('<p />') 
         .text(message.message))) 
     }); 
     //this doesn't work either, you can maybe tell me why, but that's not the issue 
     $('.counselling').data("status", [i]); 
    } 

    $(".archivedCounsellings").append('<li class="aktuell"><a><br>Zur aktuellen Beratung</a></li>'); 

    //click event to toggle the displayed counseling 
    $('.archivedCounsellings li').click(function() { 
     $('.counselling').addClass('inactive'); 
     $('div .' + $(this).attr('class')).removeClass('inactive'); 

     //workaround which works, but isn't really acceptable 
     // no load workaround 
     // if($('.openCounselling').siblings().length == 0){ 
     //  window.location.reload(); 
     // } 

     // $('.statusDisplay').text($('#job_status_' + $(this).attr('class')).data("status")); 
     // console.log($('div .' + $(this).attr('data-status'))); 
    }); 

ps. 나는 '상담'의 오타를 알고 있습니다
PPS. 분명히 실패하는 실수를 발견하면 복사하는 동안 문제가 발생할 수 있습니다. 기억하십시오. 때때로 작동합니다.

Answer 1

그래도이 문제가 발생하는 경우 : 저는 AJAX에 대해 조금 더 자세히 설명했으며 기본적으로 AJAX는 모든 요청을 어느 정도 동시에 보냅니다. done 함수에서 발생하는 모든 일이 이후에 발생하므로 성공적인 데이터 요청이 발생합니다. 내가 한 것은 다른 기능의 요소에 대한 컨테이너를 시작한 것입니다. 그래서 때로는 느린 속도로 내 요소를 추가 할 수있는 곳이 없었습니다. 오류가 발생하지 않았습니다. 아무 일도 없었습니다. 아주 구체적이기 때문에 누구나 볼 수는 없겠지만 어쩌면이게 도움이 될 것입니다.