我如何使动态创建的元素draggable()？

Question

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

提前感谢您的帮助!

$(document).ready(function () {
    $("body").on('click', '.pink', function () {
        $('.container').append($("<div class='bl pink'></div>"))
    });
    $("body").on('click', '.blue', function () {
        $('.container').append($("<div class='bl blue'></div>"))
    });
    $("body").on('click', '.coral', function () {
        $('.container').append($("<div class='bl coral'></div>"))
    });
    $(".draggable").draggable();
});

Answer 1

在创建时将类"draggable"或id放在元素中.(你没有上课)然后代码应该工作

$('.container').append($("<div class='bl pink draggable'></div>"));
$('.draggable').draggable() 

Answer 2

我会做一些像这样

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

 $("<div class='bl pink'></div>").appendTo('.container').draggable();

Answer 3

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

我决定在父元素上监听 DOM 插入，然后在插入的子元素上应用 .draggable()。例如：

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

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