Sunday, November 29, 2009

[jQuery] Jquery clone, doesn't clone

I'm using a plugin contextmenu and I want to be able to copy elements
that are dynamically created, but somehow it doesn't clone, it uses
the same element when I paste.

$.post("actions.php", { action: 'getCal', from: dFrom, to: dTo },
function(data){
cals = data.split(";;");
for(var i=0;i<cals.length-1;i++){
cal = cals[i].split(";");
$("#center").append("<div class=\"plan\">"+cal[1]+"</div>");
}
$(".plan").draggable({
grid: [211,1],
containment: $("#days"),
opacity: 0.35
}).resizable({
handles: 's'
}).contextMenu({ menu: 'itemMenu' },
function(action, el, pos) {
if(action=='delete'){
el.remove();
}else if(action=='copy'){
copyEl = el.clone(true);
}else if(action=='cut'){
copyEl = el.clone(true);
el.remove();
}else if(action=='edit'){

}
}
);
});

As you see I append div elements to #center. and when someone right
clicks and presses copy the variabele gets the element but not a copy.
(it did work when the elements were not dynamically created).

this is the code that is executed when someone pastes the element,
also the css styles are not executed on the dynamically created
object.

$("#days .day").contextMenu({ menu: 'calMenu' },
function(action, el, pos) {
copyEl.css('position','absolute');
copyEl.css('top',pos.y+'px');
var y;
if(el.attr('title') == 'day1'){
y = 5;
}else if(el.attr('title') == 'day2'){
y = 216;
}else if(el.attr('title') == 'day3'){
y = 427;
}
copyEl.css('left',y+'px');
$("#center").append(copyEl);
copyEl = copyEl.clone(true);
ResetItems();
}
);

I hope someone can help. (I was unable to find how to put code tags
around my code, hope you don't mind.

No comments: