html5sortable - sortupdate event is not triggered on dynamic elements -

i using html5sortable plugins sort list. problem is, because list , item self builds dynamically, sortupdate event listener not triggered.

is there me please?

how trigger sortupdate event on dynamically added elemetns?

here mya codes:

    var url =  'some url;     var divtree = $(".tree-module");     divtree.empty();     $.get(url).done(function (hasil) {         var isi = '';         isi += '<ol class="tree ">';         isi += '    <li>';         isi += '        <label>module<input type="checkbox"/></label>';         isi += '        <ol class="module-tree">';         $.each(hasil.master, function (i, row) {             isi += '<li class="file li-module" data-id="' + row.id + '" data-urut="' + row.urut + '">'             isi += '<a href="#module-' + row.id + '" data-module_id="' + row.id + '" class="tree-link-child">' + row.nama + '</a>'             isi += '</li>'         });         isi += '        </ol>';         isi += '    </li>';         isi += '</ol>';         divtree.html(isi);           destroy_sortable();         make_sortable();      });   var tbody_class = '.module-tree'; var destroy_sortable = function () {     sortable(tbody_class, 'destroy'); } var make_sortable = function () {     sortable(tbody_class, {         items: '.li-module',         placeholder: '<li class="file li-module bg-yellow" ><a  class="tree-link-child" href="">geser kesini..</a></li>'     });      sortable(tbody_class)[0].addeventlistener('sortupdate', function (e) {         /*          event triggered when user stopped sorting , dom position has changed.           e.detail.item contains current dragged element.          e.detail.index contains new index of dragged element (considering list items)          e.detail.oldindex contains old index of dragged element (considering list items)          e.detail.elementindex contains new index of dragged element (considering items within sortable)          e.detail.oldelementindex contains old index of dragged element (considering items within sortable)          e.detail.startparent contains element dragged item comes          e.detail.endparent contains element dragged item added (new parent)          e.detail.newendlist contains elements in list dragged item dragged          e.detail.newstartlist contains elements in list dragged item dragged          e.detail.oldstartlist contains elements in list dragged item dragged before dragged          */          console.log(tbody_class + ' sortupdate()');      }); }; make_sortable(); 

i open similar plugins suggestion. using plugin because far know, best plugin , stable on drag , dropping. have tried jquery sortable, , dont because flikering on drag , drop.

unfortunatelly, problem eventlistener on dynamic elements not triggered.

just found problem.

i solved changing index of 0 1

sortable(tbody_class)[0].addeventlistener('sortupdate', function (e) { 

change to

sortable(tbody_class)[1].addeventlistener('sortupdate', function (e) { 

i don't know how, , dont event know how index system is, works.

hope useful later.

update 1:

sorry, solution above, sometime doesnt work. dont know why index should become problem. change code dinamically take last item in array. here code replace above line

    if(sortable(tbody_class).length > 0) {         sortable(tbody_class)[sortable(tbody_class).length-1].addeventlistener('sortupdate', function (e) {