html5sortable - sortupdate 事件不会在动态元素上触发

Question

我正在使用 HTML5Sortable plugins对列表进行排序。问题是，因为列表和它自己动态构建的项目，不会触发 sortupdate 事件监听器。

有没有人可以帮助我？

如何在动态添加的元素上触发 sortupdate 事件？

这里是mya代码:

    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 sortable，但我不喜欢它，因为它在拖放时会闪烁。

不幸的是，唯一的问题是未触发的动态元素上的事件监听器。

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) {