changed.jstree event not working in jstree inside of class method

Question

I am working on jstree checkbox plugin and I want to get the checked and unchecked state of the checkbox items. The changed.jstree event is not working in the _setEvents() method. But it is working fine when I add the event inside of _setTree() method. I need to get the event trigger in _setEvents() method.

This is the code I am using:

  export default class Test {
  constructor(container) {
    this._tab = null;
    this._container = container;
    this._setEvents();
  }

  get tab() {
    return this._tab;
  }  

  show(data) {
    this._data = data;   
    this._setTree();    

    return this;
  }  


  _setEvents() {
    const self = this;

    $(document)   

      .on('click', '#js-image-container', () => {
        $('#js-image-uploader').trigger('click');
      });
      $('#js-categories-container').on('changed.jstree', () => this._handleSelection());//this wont work

    return this;
  }


  _setTree() {
    $('#js-categories-container').jstree(jsonTreeGenerator.generate(this._data.categories));
    $('#js-categories-container').on('changed.jstree', () => this._handleSelection()); //this will work
    return this;
  }
  _handleSelection() {
   alert(1);
  }
}

Answer 1

Since you are adding the js-categories-container element dynamically, I believe it is not there yet at the time when you bind an event to it. So you have to delegate event handling, e.g. same way as you do for the js-image-container element. Check demo - Fiddle Demo:

$(document).on('click', '#js-image-container', 
    () => { $('#js-image-uploader').trigger('click'); }
);

$(document).on("click", '#js-categories-container', 
    () => {
       // get the node if you need it
       var node = $('#js-categories-container').jstree().get_node(event.target); 
       // do something
       this._handleSelection();
    }
);