使用 jQuery 动态添加 div 时获取最新的 div 列表

Question

在将动态添加的 DIV 添加到 DOM 后立即访问它们时遇到一些问题。

我有一个大致类似的函数，它接受输入，获取 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()
 };

然后我有第二个函数，基本上我只想创建“Word”类页面上所有 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]);
}

问题是，当它写入控制台时，它总是落后 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();
});

}

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() 在

< 之前运行/code> 实际上是添加的...通过在像上面这样的附加之后的回调中进行调用将为您提供最新的元素。