Code is running twice, triple instead of only one time

Question

I use treeSortable (https://github.com/ahamed/treeSortable) and have two trees that are both sortable.

My javascript looks like this

$(document).ready(function () {

    const data1 = [
        { id: 1, parent_id: 0, title: 'Europe', level: 1 },
        { id: 2, parent_id: 1, title: 'Asia', level: 2 },
        { id: 3, parent_id: 1, title: 'Africa', level: 2 },
    ];

    const data2 = [
        { id: 1, parent_id: 0, title: 'Ohio', level: 1 },
        { id: 2, parent_id: 1, title: 'Texas', level: 2 },
        { id: 3, parent_id: 1, title: 'California', level: 2 },
    ];

    const sortable1 = new TreeSortable();
    const $tree1 = $('#tree1');
    const $content1 = data1.map(sortable1.createBranch);
    $tree1.html($content1);

    sortable1.options = {
        depth: 30,
        treeSelector: '#tree1',
        branchSelector: '.tree-branch',
        branchPathSelector: '.branch-path',
        dragHandlerSelector: '.branch-drag-handler',
        placeholderName: 'sortable-placeholder',
        childrenBusSelector: '.children-bus',
        levelPrefix: 'branch-level',
        maxLevel: 10,
        dataAttributes: {
            id: 'id',
            parent: 'parent',
            level: 'level'
        },
    }

    sortable1.run();

    sortable1.onSortCompleted(function(event, ui) {
        console.log('continents');
    });

    const sortable2 = new TreeSortable();
    const $tree2 = $('#tree2');
    const $content2 = data2.map(sortable2.createBranch);
    $tree2.html($content2);

    sortable2.options = {
        depth: 30,
        treeSelector: '#tree2',
        branchSelector: '.tree-branch',
        branchPathSelector: '.branch-path',
        dragHandlerSelector: '.branch-drag-handler',
        placeholderName: 'sortable-placeholder',
        childrenBusSelector: '.children-bus',
        levelPrefix: 'branch-level',
        maxLevel: 10,
        dataAttributes: {
            id: 'id',
            parent: 'parent',
            level: 'level'
        },
    }

    sortable2.run();

    sortable2.onSortCompleted(function(event, ui) {
        console.log( 'States');
    });
});

Both lists are show, can be nested and sorted.

When I have completed sorting of one of the lists I would like to parse the code and save the structure of the sorted tree list.

After sorting items in one of these lists I see in the console:

continents
states

I would like to output "continents" only after sorting #tree1 and show "states" only if I sorted items within #tree2.

What am I doing wrong?

Barmar · Answer

I looked at the source code, and the onSortCompleted() method adds an event listener to the document, not anything specific to a particular sortable list. So all of the handlers run.

You can use the ui argument to tell whether it was triggered for this tree.

I haven't tested it, but I think something like this should work:

    sortable2.onSortCompleted(function(event, ui) {
      if (ui.helper.is('#tree2')) {
        console.log( 'States');
      }
    });

ui is the jQuery-UI object, and the .helper property is the jQuery object representing the object being sorted.

Code is running twice, triple instead of only one time

1 Answers