當使用jQuery動態添加div時，獲取div的最新列表

在將DOM添加到DOM後立即訪問動態添加的DIV時存在一些問題。當使用jQuery動態添加div時，獲取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的數組在「Word」類。（這樣我可以將每個新的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]); 
}

問題是，當它寫入控制檯時，它始終是1 div。因此，在添加第一個之後，它不返回任何內容，第二個返回第一個，第三個返回第一個和第二個，依此類推。

我該怎麼做才能確保它抓住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(); 
});

}

來源

2010-11-22 McB

你需要調用它後插入，所以$.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()在<div>實際添加之前運行...通過在回調之後在回調中撥打電話將會爲您提供最新元素。

來源

2010-11-22 19:41:08

這適用於添加屬性，但不適用於出於某種原因刪除它們。我列出了該函數的縮寫版本，但基本上在添加div之前它會檢查是否存在相同的版本。如果是，則將其刪除，否則將其添加。所以，當我將函數移動到getJSON中時，添加它是準確的，但仍然在刪除之後。 – McB 2010-11-22 19:44:59

當使用jQuery動態添加div時，獲取div的最新列表

回答

相關問題