jquery - 克隆对象不可放置

Question

我正在尝试使用 Jquery 克隆一个可放置的对象，但克隆的对象不可放置。

$(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 显示克隆的对象也具有类 ui-droppable ，知道为什么它不起作用吗？

编辑
设置 bool(true) 或使用 .droppable() 链接克隆对象也不起作用

Answer 1

您需要将事件复制到克隆；传递true给clone()：

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

---

您可能还需要从原始数据中复制一些数据：

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

Answer 2

我找到了一种方法来实现这一点，通过使用 .live，我正在使用一个插件.livequery，它的功能与 .live 非常相似

当您绑定“实时”事件时，它将绑定到页面上所有当前和未来的元素

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