javascript - 可放置父项下的动态元素，over and out 事件无法正常工作

Question

我有 2 列，我将这 2 列设置为可放置的，当我在其中任何一个上“结束”时，我正在创建新的“列表”，因为它是孩子，并且我正在制作孩子的可放置的..

但是我无法放下新的孩子，我需要将拖动的列表元素附加到孩子元素..

这是我写的函数：

 var generate = function (id) {

  var id = "#" + id, c = 0, ul = $("<ul />");

  $(id).empty();

    while(c < 10 ) {
      c ++;  
        ul.append($("<li />", { text : c + " new list"}));
    }

    return ul;

}


$("li").draggable({

    revert:true,
    helper: "clone"

});

$(".cl").droppable({
    accept: "li",
    activeClass : "highLight",
    over: function( event, ui ) {

       var elements = generate(event.target.id);

        $("#" + event.target.id).append(elements);

        $(".cl li").droppable({
            over : function (event, ui ){
                console.log("it is over now!"); // not working
            },
            drop : function () {
                console.log ("dropped");
            },

out : function () {
 console.log ("I am out") // not working..
}


            });

        }
    });

这是现场演示

任何人都可以帮我解决这个问题..新的孩子变成了可拖放的并附加了可拖动列表的副本..？

提前致谢..

Answer 1

问题是每次鼠标移到列上时都会重新生成顶级子级。通过在 over: 函数的顶部添加以下代码来修复它：

if (event.target._generated)
    return;

event.target._generated = true;

这是工作的FIDDLE：http: //jsfiddle.net/eM8CX/