JQuery UI Draggable - 如果参数传递给 clone()，则返回 clone() 的帮助函数仅克隆一次

Posted 2023-05-08

【中文标题】JQuery UI Draggable - 如果参数传递给 clone()，则返回 clone() 的帮助函数仅克隆一次

【英文标题】：JQuery UI Draggable - Helper function which returns clone() only clones once if arguments passed to clone()

【发布时间】：2016-01-11 13:25:12

【问题描述】：

我正在克隆元素，因为它们是使用 JQuery 的 clone() 方法从 JQuery UI Draggable 列表中拖出的。查看clone() documentation，我发现我可以通过将一个或两个布尔参数(true,true) 传递给clone() 方法来克隆已经绑定到这些元素的事件。

通过传递这些参数，事情变得很奇怪。如果我只使用clone()，如下所示，事情会按预期工作。

$(".draggable").draggable(
    connectToSortable: ".sortable",
    helper: function(e) 
        return $(this).clone();
    
);

在上面的示例中，我获得了无限的克隆，但与克隆元素相关联的事件也没有被克隆。那么，很自然地，我想为这个clone() 方法添加一两个参数，这样我也可以克隆事件！

$(".draggable").draggable(
    connectToSortable: ".sortable",
    helper: function(e) 
        return $(this).clone(true);
    
);

但这使得事物只克隆一次。有关示例，请参见下面的小提琴！

这是一个 clone(true) 的小提琴，它只克隆一次： http://jsfiddle.net/og937wy7/9/

这里有一个clone() 的小提琴，它克隆了很多次。 http://jsfiddle.net/og937wy7/10/

【参考方案1】：

我相信你在帮助选项中误用了"clone" - 你不能将方法指定为字符串，字符串只是 jQueryUI 如何处理拖动元素的标识符。您可以提供一个方法（可调用）或一个字符串，如 in the docs。

如果您将帮助器选项设置为"clone" 而不是"clone(true, true)"，则将复制拖动的元素（当“拖动”时），正如我在小提琴中看到的那样，事件也附加到它（因为你正确绑定事件）。

在你的小提琴中试试这个：

$(".sortable").sortable(
);
$(".draggable").draggable(
    connectToSortable: ".sortable",
    helper: "clone"
);

【讨论】：

感谢您的帖子。我实际上已经意识到将函数作为字符串传递会搞砸……但是我遇到了另一个特殊的问题。出于某种原因，当我使用不带参数的 clone() 时，一切正常。当我尝试为复制事件处理程序添加参数时，它只会克隆一次。知道为什么吗？

请用细节和例子更新你的问题，这样我就可以看一下并尝试弄清楚。

完成。更新的问题和两个小提琴。这两个小提琴的唯一区别是问题中提到的论点true。

为什么又使用clone() 不适合你？你的第二把小提琴奏效了。请更“详细”地解释你在问什么..

你是对的。我刚刚删除了 True 参数，我的所有事件仍然正常工作，因为我将它们绑定到工作区而不是元素本身。当我第一次实现这个时，我必须以不同的方式绑定事件。谢谢你帮我找出来！！

【参考方案2】：

如果我明白你的意思，你想多次克隆元素。只需从 clone(true, true) 中删除参数即可：

$(".sortable").sortable(
);
$(".draggable").draggable(
    connectToSortable: ".sortable",
    helper: function(e) 
        return $(this).clone();
    
);

【讨论】：

clone 方法的参数对于我的用例来说是必需的，因为我也需要它来复制与它们相关的事件。