JSTree select_node event firing twice

Question

There is a select_node event I created. But its firing twice when we select a node. Here as you can see the alter I set on the select_node event Which is firing twice.

Also in the JStree initialisation I specified a check event.

    $('#div_vocabulary_tree').on('select_node.jstree', function (e, data) {
        alert("Select Event");
    });

This is my JStree initialization code

            $('#div_vocabulary_tree').jstree({
                plugins: ["wholerow", "checkbox", "types", "search"],
                "search": {

                    "case_insensitive": true

                },
                'checkbox': {
                    three_state: false, // to avoid that fact that checking a node also check others
                    whole_node: false, // to avoid checking the box just clicking the node 
                    tie_selection: false // for checking without selecting and selecting without checking
                },
                'core': {
                    themes: {
                        responsive: !1
                    },
                    check_callback: false,
                    'data': arrayCollectiom,
                    types: {
                        "default": {
                            icon: "fa fa-folder icon-state-warning icon-lg"
                        },
                        file: {
                            icon: "fa fa-file icon-state-warning icon-lg"
                        }
                    }
                }
            }).on("check_node.jstree uncheck_node.jstree", function (e, data) {
                //alert(data.node.parents);
                //alert(data.node.parent);
                //alert(data.node.id + ' ' + data.node.text +   (data.node.state.checked ? ' CHECKED' : ' NOT CHECKED'))
            })

More info When I drilled down, what I found is if we select the first level (Root) node, it fires only one, if its 2nd level it fires 2.. same if in 3rd level, select_node event fires 3 times.. So there is some connection with level and select_node event I guess. So how can we solve this issue because of connection with level and select event

Answer 1

When you select the root node, the code will only fire once. When you select a child node, the child node is still a part of the root node. So the code will fire once for the child node, and once for the root node.

If you were to have 7 levels deep of child nodes, the event would fire seven times.

An example of how to handle it inside the event handler is to check that the target the event is firing on is the current target that was selected or clicked:

this._tree = this.$('.js-tree');

if(this._tree.get_node(evt.target) == this._tree.get_node(evt.currentTarget){
    //Do event logic
} else {
    //Do nothing
    return;
}