Enable draggable and droppable on dynamically created elements jQuery -

i want automatically enable 'draggable' , 'droppable' on dynamically created elements. don't want reinitialize after add element dom.

for example:

$('static_element_such_as_body').on('event', 'dynamicelement', function(){      console.log('yayyyy');  }); 

that truely dynamic event handler. how can impliment 'draggable' , 'droppable' .on or .live binder?

there code i'm using drag , droppable:

    $('.draggable').draggable({         helper: function() { //helper function used duplicate event dragged               return $('<p>winning</p>').append($(this).find('.name').clone()); //idk class or .name without it, bombs out         },         stack: ".draggable", //this changes our z index upper         start: function(event, ui) { //this fires on start             c.tr        = this; //set our c cariable             c.helper    = ui.helper;         }     }).droppable({ //this let's know element droppable         drop: function(event, ui) { //when drop             $(c.helper).remove();         },         over: function (event, ui) { //called when hovering on droppable element selector             console.log('over');         },         out: function(event, ui){             console.log('left');         }     }); 

apparently no 1 knows figured out more 'automated' solution. instead of manually re-initializing once add element, can use event handler automate re-initializing you.

$maincontainer.on('domnodeinserted', function(e){     if($.inarray('relatable', e.target.classlist) != -1){         drag_drop_init();         if(helper_bool_isrelatableenabled){             drag_drop_enable();         }else{             drag_drop_disable();         }     } }); 

where $maincontainer static element, such $('body'), , 'relatable' name of class use know element should allow drag , droppable. it's class use initialize ie: $('.relatable').draggable()