jQuery를 사용하여 div를 동적으로 추가 할 때 div의 최신 목록 가져 오기

Question

DIV가 DOM에 추가 된 직후 동적으로 추가 된 DIV에 액세스하는 데 약간의 문제가 있습니다.

나는 입력을 받아서 JSON 데이터를 얻고 div를 생성하는 것과 비슷한 기능을 가지고있다.

function addAttrib(attrib) { 
    $.getJSON("file.json", function(data) { 
     //Do all the stuff 
     var newDiv = $("<div class='word'>"+label+"</div>").insertAfter("#mapLabels"); 
     var adjustedX = x - (newDiv.width()/2); 
     var adjustedY = y - (newDiv.height()/2); 
     newDiv.css("left",adjustedX); 
     newDiv.css("top",adjustedY); 
     newDiv.fadeIn("slow"); 
    }; 
    saveAttribs() 
}; 

그때 나는 기본적으로 그냥 클래스 "단어"의 페이지의 모든 DIV 년대의 배열을 만들려면 두 번째 기능을 가지고있다. (그래서 새로운 div를 별도의 JSON 파일로 저장할 수 있습니다.)

그래서 위의 마지막에 호출되는 두 번째 함수는 Save Attribs라고하며 현재는 디버그 모드에 있으므로 console.log를 사용합니다.

function saveAttribs() { 
    $.wordTracker.maps[$.wordTracker.currentMap] = []; 
    $.wordTracker.maps[$.wordTracker.currentMap].length = 0; 
    $(".word").each(function() { 
    //items.push($(this).text()); 
     $.wordTracker.maps[$.wordTracker.currentMap].push($(this).text()); 
    }); 
    console.log($.wordTracker.maps[$.wordTracker.currentMap]); 
} 

문제는 콘솔에 쓸 때 항상 1div 뒤에 있다는 것입니다. 그래서 첫 번째를 추가 한 후에는 아무것도 반환하지 않고 두 번째는 첫 번째를 반환하고 세 번째는 첫 번째와 두 번째를 반환합니다.

내가 DIV의 최신 날짜 목록을 갖도록하려면 어떻게해야합니까? 아니면 완전히로드 될 때까지 기다리시겠습니까?

여기에 대한 응답에 따라 첫 번째 기능의보다 완전한 버전이 있습니다.

function addAttrib(attrib) { 
$.getJSON("file.json", function(data) { 
    //Cut out some vars for simplicity... 
var exists = $('#'+attrib).length; 
    if (exists >= 1) { 
     $('#'+attrib).fadeOut("fast", function() { $(this).remove()}); 
     //$('.word').remove(); 
    } else { 
     var newDiv = $("<div class='word' zone='"+data[attrib].ZoneName+"' map='"+$.wordTracker.currentMap+"' id='"+attrib+"'>"+label+"</div>").insertAfter("#mapLabels"); 
     var adjustedX = x - (newDiv.width()/2); 
     var adjustedY = y - (newDiv.height()/2); 
     newDiv.css("left",adjustedX); 
     newDiv.css("top",adjustedY); 
     newDiv.fadeIn("slow"); 
    } 
    focusOnInput(); 
    saveAttribs(); 
}); 

}

Answer 1

당신은, 후 그것을 삽입을 를 호출 할 필요가 $.getJSON() 콜백 내부의이 같은 : 그래서, 요청이 완료 될 때

$.getJSON("file.json", function(data) { 
    //Do all the stuff 
    var newDiv = $("<div class='word'>"+label+"</div>").insertAfter("#mapLabels"); 
    var adjustedX = x - (newDiv.width()/2); 
    var adjustedY = y - (newDiv.height()/2); 
    newDiv.css({left: adjustedX, top: adjustedY).fadeIn("slow"); 
    saveAttribs(); 
}); 

콜백 기능을 나중에 실행 현재 saveAttribs()이 실제로 실행되기 전에 실행됩니다 ... 위의 추가 후 콜백에서 호출하면 최신 요소가 제공됩니다.