Получение наиболее актуального списка div'ов при их динамическом добавлении с использованием jQuery - PullRequest
Новая
       17

Получение наиболее актуального списка div'ов при их динамическом добавлении с использованием jQuery

0 голосов
/ 22 ноября 2010

Немного проблем с доступом к динамически добавленным 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()
 };

Затем у меня есть вторая функция, в основном я просто хочу создать массив всех 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 - или ждет, пока они полностью загрузятся?

На основе ответа приведена более полная версия первой функции. 

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();
});

}

1 Ответ

1 голос
/ 22 ноября 2010

Вам нужно назвать его после вставки, поэтому внутри обратного вызова $.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> будет фактически добавлен ... путем выполнения вызова в обратном вызове после добавления, как указано выше, вы получите последние элементы.

...