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
Solution 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();
OTHER TIPS
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! */
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow