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
Post a Comment