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