html5sortable - событие sortupdate не вызывается для динамических элементов

Question

Я использую плагины HTML5Sortable для сортировки списка. проблема в том, что, поскольку список и элемент, который он сам создает, динамически, слушатель события sortupdate не запускается.

Кто-нибудь может мне помочь, пожалуйста?

Как вызвать событие sortupdate для динамически добавленных элементов?

вот миа коды:

    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) {
        /*
         This event is triggered when the user stopped sorting and the DOM position has changed.

         e.detail.item contains the current dragged element.
         e.detail.index contains the new index of the dragged element (considering only list items)
         e.detail.oldindex contains the old index of the dragged element (considering only list items)
         e.detail.elementIndex contains the new index of the dragged element (considering all items within sortable)
         e.detail.oldElementIndex contains the old index of the dragged element (considering all items within sortable)
         e.detail.startparent contains the element that the dragged item comes from
         e.detail.endparent contains the element that the dragged item was added to (new parent)
         e.detail.newEndList contains all elements in the list the dragged item was dragged to
         e.detail.newStartList contains all elements in the list the dragged item was dragged from
         e.detail.oldStartList contains all elements in the list the dragged item was dragged from BEFORE it was dragged from it
         */

        console.log(tbody_class + ' sortupdate()');

    });
};
make_sortable();

Я открыт для другого предложения аналогичных плагинов. В настоящее время я использую этот плагин, потому что, насколько я знаю, это лучший плагин и самый стабильный при перетаскивании. Я пробовал сортировать jQuery, и мне это не нравится, потому что он перетаскивает мышью.

К сожалению, единственной проблемой является этот EventListener на динамических элементах, который не срабатывает.

Answer 1

Только что нашел проблему.

я решил это, изменив этот индекс от 0 до 1

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

изменить на

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

Я не знаю, как, и я не знаю, как система индекса, но она работает.

надеюсь, это будет кому-то полезно позже.

ОБНОВЛЕНИЕ 1:

извините, решение выше, иногда не работает. Я не знаю, почему индекс должен стать проблемой. поэтому я изменяю код, чтобы динамически брать последний элемент в массиве. вот код для замены вышеуказанной строки

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