JQuery UI "drop" event does not fire?

I have a drag and drop interface with JQueryUI, and when a user drags an element into one of its containers and drops it, I want to display some information about the selected item.

$(document).ready(function()
 {
  $( ".element" ).dragg开发者_运维百科able({snap: ".elementContainer"});
  $( ".elementContainer" ).droppable({
   drop:function(){
    $("table").append('<tr><td class="elementContainer ui-droppable"></td></tr>');
   }});
 });

So it's creating a new element with the UI droppable class. My question is, why won't it fire a "drop" event on the newly created element?

It won't fire because when you run $(".elementContainer").droppable(...) it binds the droppable widgets to the .elementContainer elements that exist at that time, s you'll need to run the plugin again for newly created elements with the class.

Something like this:

$(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();
});

This is the plugin version to cut down on code...but the basic premise is you need to call .droppable(...options...) on all the new <td> elements as well, since the widget code wasn't run on them before...because they didn't exist yet.