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

Question

Я добавляю элементы динамически с помощью Javascipt:

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

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

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

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

Answer 1

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

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

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

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

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

Answer 2

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

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

Answer 3

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++;