Clone object unavailable

Question

I am trying to clone a droppable object using jQuery, but the cloned object is not discarded.

$(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 a ui-droppable class, any idea why this will not work?

EDIT
Setting bool (true) or chaining a cloned object with .droppable () doesn't work either

Answer 1

I learned how to do this using .live, I am using a plugin . livequery that functions pretty similar with .live

When you bind a live event, it binds 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(); 

Answer 2

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 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! */