JQuery UI "drop" event does not fire? -


i have drag , drop interface jqueryui, , when user drags element 1 of containers , drops it, want display information selected item.

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

so it's creating new element ui droppable class. question is, why won't fire "drop" event on newly created element?

it won't fire because when run $(".elementcontainer").droppable(...) binds droppable widgets .elementcontainer elements exist at time, s you'll need run plugin again newly created elements class.

something 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 plugin version cut down on code...but basic premise need call .droppable(...options...) on new <td> elements well, since widget code wasn't run on them before...because didn't exist yet.


Comments

Popular posts from this blog

android - Spacing between the stars of a rating bar? -

html - Instapaper-like algorithm -

c# - How to execute a particular part of code asynchronously in a class -