jquery - 子元素中的拖放工作很奇怪

Question

我已经构建了一个这样的拖放系统：这是一个可以拖放到可编辑 Div 中的列表：列表代码是这样的：

<li class='file'>test<li>
$("li.file").bind("dragstart",function(e){
e.originalEvent.dataTransfer.effectAllow='move';
e.originalEvent.dataTransfer.setData('text',$(this).text());
});`    

然后我有一个 Div 来获取拖动项：

<div id='editor'><div>
$("#editor").bind('dragover',function(e){
e.originalEvent.dataTransfer.dropEffect="move";
if(e.preventDefault){
e.preventDefault();
});
$("#editor").bind('drop',function(e){
    if (e.target==$('#editor')[0]){
#add a sub <div class="editorcontent"> under the <div id='editor'>
}

这些代码工作正常。现在我想在 'div.editorcontent 上添加一个新的拖放事件，以允许两个不同的 editorcontent div 切换它们的位置：

$("div.editorcontent").bind("dragstart",function(e){
e.originalEvent.dataTransfer.effectAllow='move';
});
$("div.editorcontent").bind("dragover",function(e){
e.originalEvent.dataTransfer.dropEffect="move";
if(e.preventDefault){
e.preventDefault();
}

});
$("div.editorcontent").bind("drop",function(e){
    alert(e.target);
});

但是这些代码不起作用。我在 chrome 上设置了断点，似乎只有#editor 的拖放事件在使用中。每当我拖动 div.editorcontent 时，都不会发生任何事件。当我将 div.editorcontent 元素放在另一个 div.editorcontent 上时。chrome进入#editor的drop事件。那么我该如何解决这个问题？

Answer 1

问题是，当 $.ready 新添加的 div 不存在时，这些 div 的新处理程序不会绑定在这些 div 上。