Clone object is not droppable

Question

I'm trying to clone a droppable object using Jquery but the cloned object is not droppable.

$(document).ready(function(){
$("input[value='Add']").click(function(e){
e.preventDefault();
$("div.field:last").clone().insertAfter("div.field:last");
});

$(".field").droppable();

HTML

<div class="field">
Last Name<input type="text" value="" />
First Name<input type="text" value="" />
</div>
<div class="field">
Last Name<input type="text" value="" />
First Name<input type="text" value="" />
</div>
<input type="Submit" name="submit" value="Add" />

Firebug shows that the cloned object has the class ui-droppable as well, any idea why it wouldn't work?

EDIT
Setting bool(true) or chaining the cloned object with .droppable() is not working either

Answer 1

You need to copy the events to the clone; pass true to clone():

$("div.field:last").clone(true).insertAfter("div.field:last");

---

You may also need to copy over some data from the original:

var original = $("div.field:last");
var clone = original.clone(true);
clone.data( 'droppable', jQuery.extend(true, {}, original.data('droppable')) );
/* Untested! */

Answer 2

I think that the cloned object will have all the element attributes, but will have no attached events that droppable uses internally.

insertAfter returns you the inserted elements, you could set the cloned element as droppable on your click handler:

$("input[value='Add']").click(function(e){
  e.preventDefault();
  $("div.field:last").clone().insertAfter("div.field:last").droppable();
});

Answer 3

I found out a way to accomplish this, by using the .live, I'm using a plugin .livequery which functions quite similiar with .live

When you bind a "live" event it will bind to all current and future elements on the page

$("input[value='Add']").livequery("click", function(e){
e.preventDefault();
$("div.field:last").clone().insertAfter("div.field:last");
$("div.field").droppable();