Как получить смещение динамически создаваемых элементов?

Question

Я добавляю элементы динамически, используя javascipt:

$('.marker').append('<div class="container" id="id' + counter + '" ><input type="text" name="textbox" id="textbox' + counter + '" value="" ></div>');
counter++; 

И мне нужно иметь позиции (смещение x и y) этих добавленных элементов. Пользователь может добавлять и удалять эти элементы. Затем он должен быть сохранен, и мне нужен окончательный список позиций элементов.

Я пытался использовать функцию jquery offset(), но она работала только для не динамически добавляемых элементов.

Можно ли восстановить смещение этих динамически добавленных элементов? И если да, то как?

Answer 1

Не уверен, что вы не очень хорошо объясняете, поскольку следующий пример выполняет то, что вы просите ...

http://jsfiddle.net/johncmolyneux/zXSuh/

Просто откройте консоль и запустите ее.

Вот код, который показывает значения смещения в консоли ...

$(".container").each(function() {
    console.log($(this).offset().top);
});

Answer 2

var div = $("<div>", {
    "class": "container",
    id: "id" + counter
}).append($("<input>", {
    type: "text",
    name: "textbox",
    id: "textbox" + counter
}));

$(".marker").append(div);

var offset = div.offset();
console.log(offset.left, offset.top);

counter++;

Answer 3

Вы пытались присвоить переменную динамически созданному элементу следующим образом:

var el = $('<div class="container" id="id' + counter + '" ><input type="text" name="textbox" id="textbox' + counter + '" value="" /></div>');

$('.marker').append(el);
counter++; 

Тогда вы сможете использовать el.offset ():

el.offset();