changed.jstree 事件在 class 方法内部的 jstree 中不起作用

Question

我正在开发 jstree 复选框插件，我想获取复选框项的选中和未选中状态。 changed.jstree 事件在 _setEvents() 方法中不起作用。但是当我在 _setTree() 方法中添加事件时它工作正常。我需要在 _setEvents() 方法中获取事件触发器。

这是我使用的代码：

  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

由于您是动态添加 js-categories-container 元素，我相信当您将事件绑定到它时它还不存在。所以你必须委托事件处理，例如与 js-image-container 元素的处理方式相同。检查演示 - 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();
    }
);

changed.jstree 事件在 class 方法内部的 jstree 中不起作用

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

javascript

jquery

jstree