我如何使动态创建的元素draggable（）？

我正在试图弄清楚如何使动态创建的div可拖动，所以我创建了这个非常简单的东西来帮助我。 我知道我必须使用非动态处理程序的on（）事件。 通过让body元素处理链接的JSfiddle中的克隆事件，我成功地使动态创建的div克隆，但它们不可拖动。 我究竟做错了什么？

提前谢谢你的帮助！

$(document).ready(function () { $("body").on('click', '.pink', function () { $('.container').append($("
")) }); $("body").on('click', '.blue', function () { $('.container').append($("
")) }); $("body").on('click', '.coral', function () { $('.container').append($("
")) }); $(".draggable").draggable(); }); 

Answer 1

在创建时将类“draggable”或id放在元素中。 （你没有上课）然后代码应该工作

 $('.container').append($("
")); $('.draggable').draggable() 

Answer 2

我会做这样的事情

我将元素添加到容器后调用draggable方法，如下所示：

  $("
").appendTo('.container').draggable(); 

Answer 3

我有同样的问题。 接受的答案肯定有效，但我一直在寻找更清洁，更集中的解决方案。 我不想在我的脚本插入新元素的每个地方显式调用.draggable（）。

我解决的是在父元素上侦听DOM插入，然后在插入的子元素上应用.draggable（）。 例如：

 $("#Parent").on("DOMNodeInserted", ".ChildClass", function() { $(this).draggable(); }); 

看看这个小提琴演示： http ： //jsfiddle.net/9hL7u95L/

Answer 4

将可拖动类添加到动态添加的元素中。

 $(document).ready(function () { $("body").on('click', '.pink', function () { $('.container').append($("
")); $(".draggable").draggable(); }); $("body").on('click', '.blue', function () { $('.container').append($("
")); $(".draggable").draggable(); }); $("body").on('click', '.coral', function () { $('.container').append($("
")); $(".draggable").draggable(); }); }); 

Answer 5

您可以通过以下方式执行此操作：

 $(document).ready(function () { $('.container').on('click', '.pink', function () { $('.container').append($("
")); $('.draggable').draggable(); }); $('.container').on('click', '.blue', function () { $('.container').append($("
")); $('.draggable').draggable(); }); $('.container').on('click', '.coral', function () { $('.container').append($("
")); $('.draggable').draggable(); }); $('.draggable').draggable(); }); 

工作演示

Answer 6

我已经添加了一些内容，希望它会有所帮助： http ： //jsfiddle.net/m3BXZ/8/

基本上我已经创建了一个名为startDrag的函数，它使新块可以拖动：

 function startDrag(){ $(".bl").draggable(); } 

有很多方法可以帮助您找到最适合您的解决方案。

Answer 7

使用

 $("
").draggable().appendTo($('.container')); 

DEMO

 $(document).ready(function () { $('.container').on('click', '.pink', function () { $("
").draggable().appendTo($('.container')); }); $('.container').on('click', '.blue', function () { $("
").draggable().appendTo($('.container')); }); $('.container').on('click', '.coral', function () { $("
").draggable().appendTo($('.container')); }); $(".draggable").draggable(); }); 

.appendTo