Jquery ui jqueryui"；删除“；事件不触发？

我有一个JQueryUI的拖放界面，当用户将一个元素拖到它的一个容器中并拖放它时，我想显示一些关于所选项目的信息

$(document).ready(function()
 {
  $( ".element" ).draggable({snap: ".elementContainer"});
  $( ".elementContainer" ).droppable({
   drop:function(){
    $("table").append('<tr><td class="elementContainer ui-droppable"></td></tr>');
   }});
 });

$（文档）.ready（函数（）
{
$（“.element”）.draggable（{snap:“.elementContainer”}）；
$（“.elementContainer”）.Dropable({
drop:function（）{
$（“表格”）。附加（“”）；
}});
});

---

因此，它使用UI droppable类创建了一个新元素。我的问题是，为什么它不在新创建的元素上触发“drop”事件呢？

它不会触发，因为当您运行

$（“.elementContainer”）.dropable（…）

时，它会将可拖放的小部件绑定到当时存在的

.elementContainer

元素上，对于类中新创建的元素，您需要再次运行插件

大概是这样的：

$(document).ready(function() {
  $( ".element" ).draggable({snap: ".elementContainer"});

  $.fn.bindDroppable = function() {
    return this.droppable({
      drop:function(){
        $('<tr><td class="elementContainer"></td></tr>')
          .find(".elementContainer").bindDroppable().end().appendTo("table");
      }
    });
  };
  $(".elementContainer").bindDroppable();
});

$（文档）.ready（函数（）{
$（“.element”）.draggable（{snap:“.elementContainer”}）；
$.fn.bindDroppable=函数（）{
返回这个。可删除({
drop:function（）{
$('')
.find（“.elementContainer”）.binddropable（）.end（）.appendTo（“表”）；
}
});
};
$（“.elementContainer”）.bindDropable（）；
});

这是减少代码的插件版本…但基本前提是您需要在所有新的

元素上调用

.droppable（…选项…

），因为之前没有在它们上运行小部件代码…因为它们还不存在