Javascript删除单击处理程序

我是javascript新手，我编写了这个javascript类来生成嵌套在无序列表中的表。我想将表上的状态保存为主页上的状态，因为我有多个选项卡，当我返回显示此表的选项卡时，它的状态应与以前相同。在我的主脚本文件中，我正在创建这个类的一个实例，并在初始化期间仅从数据生成一次自定义表。每次打开此选项卡时，我都调用updateTable方法向表中添加新数据，这将向ul添加新数据并返回this.ul。我可以保存表的状态，但在第一次返回此选项卡后，我无法触发单击事件。不知何故，事件处理程序在第一次之后没有被调用

import {TaskQueue} from './run-task-queue.js';
export class Table {
  constructor(groups,file_dir, list_type) {
    this.ul = $('<ul style="padding-top:10px;"></ul>');
    this.data = groups;
    this.type = list_type;
    this.file_dir = file_dir;
    this.selected = {};
    this.runTaskQueue = new TaskQueue();
  }

  addTableHeader() {
    var hdr = $('<li></li>');
    var hdrDiv = $('<div class="row" style="margin:0;background-color:aliceblue"></div>');
    var hdrCheckbox = $('<div class="my-auto" style="padding:10px"><input class="float-left" type="checkbox" style="cursor:pointer"></div>');
    var hdrPlayIconDiv = $('<div class="my-auto float-right" style="padding:10px; flex:1; color:green;"></div>');
    var hdrPlayIcon = $('<i class=" fa fa-play float-right" data-run-status="notrunning" style="cursor:pointer"></i>');
    hdrPlayIcon.on('click',function(e){
      status = e['target'].getAttribute("data-run-status");
      if(status === 'running') {
        e['target'].classList = ''
        e['target'].classList = 'fa fa-play float-right';
        e['target'].setAttribute("data-run-status", "notrunning");
        this.runTaskQueue.clearTaskQueue();
      }
      else {
        e['target'].classList = ''
        e['target'].classList = 'fa fa-pause float-right';
        e['target'].setAttribute("data-run-status", "running");
        this.runTaskQueue.enqueueTaskList(this.selected);
      }
    }.bind(this));
    hdr.css('cursor','default');
    hdrDiv.append(hdrCheckbox);
    hdrPlayIconDiv.append(hdrPlayIcon);
    hdrDiv.append(hdrPlayIconDiv);
    hdr.append(hdrDiv)
    this.ul.append(hdr);
  }

  generateTableRow(val) {
    var row = $('<tr></tr>');
    var cell = $('<td></td>').text(val);
    if(this.type === 'test') {
      var checkboxCell = $('<td></td>');
      var checkbox = $('<input type="checkbox">');
      checkbox.on('click', function(e){
        if(!e.target.checked)
          delete this.selected[val]
        else {
          var task = {};
          task['file_name'] = val;
          task['file_dir'] = this.file_dir;
          var x = ($(e.target).parent().siblings()[2]);
          task['element'] = x.children[0].children[0];
          task['doneClassList'] = "fa fa-play float-right";
          task['queueClassList'] = "fa fab fa-stack-overflow float-right",
          task['runningClassList'] =  "fa fa-spinner fa-spin float-right", 
          this.selected[val] = task;
        }
        console.log(this.selected)
      }.bind(this));
      checkboxCell.append(checkbox);
      row.append(checkboxCell);
    }
    row.append(cell);

    if(this.type ==='replay' || this.type ==='test') {
      var editIcon = $('<td style="flex:1;"><div class="my-auto float-right" style="padding:10px; color:#15AABF;"><i class=" fa fa-edit float-right"></i></div></td>');
      row.append(editIcon);
    }
    if(this.type === 'test') {
      var playIcon = $('<td style="flex:1;"><div class="my-auto float-right" style="padding:10px; color:green;"><i class="fa fa-play float-right"></i></div></td>');

      playIcon.on('click', function(e){
        console.log(e);
        console.log(this);
        var element = e['target'];
        // element.classList.remove("fa-play");
        // element.classList.add('fa-spinner');
        // element.classList.add('fa-spin');
        this.runTaskQueue.enqueueTask({'file_name': val,'file_dir': this.file_dir, 'element':e.target,
                                        'queueClassList' : "fa fab fa-stack-overflow float-right",
                                        'runningClassList': "fa fa-spinner fa-spin float-right", 
                                        'doneClassList':"fa fa-play float-right"});
        //e['target'].classList.remove('color','blue');
      }.bind(this))
      row.append(playIcon);
    }
    return row;
  }

  generateTableListItem(key) {
    var li = $('<li class="hide_group"></li>');
    var div = $('<div class="row" style="margin:0;"></div>');
    var p = $('<div class="my-auto" style="padding:10px;flex:1"></div>').append($('<p class="my-auto"></p>').text(key));
    var i = $('<div class="my-auto float-right" style="padding:10px" ><i class=" fa fa-plus float-right"></i></div>');
    p.on('click',function(){
      $(this).parent().parent().toggleClass('hide_group');
    });
    i.on('click',function(){
      $(this).parent().parent().toggleClass('hide_group');
    })
    var nestedTable = $('<table class="tabel table-hover" style="width:98%; margin-left:20px;"></table>');
    this.data[key].forEach(val => {
      var row = this.generateTableRow(val);
      nestedTable.append(row);
    })

    if(this.type === 'test'){
      var checkbox = $(`<div class="my-auto" style="padding:10px"><input class="float-left" type="checkbox" ></div>`);
      checkbox.on('click', function(){
        console.log('checkbox -clicked')
      });
      div.append(checkbox);
    }

    div.append(p);
    div.append(i);
    li.append(div);
    li.append(nestedTable);
    return li;
  }

  generateTableFromGroups() {
    this.ul.empty();
    if(this.type === 'test')
      this.addTableHeader();
    Object.keys(this.data).forEach(key => {
      var li = this.generateTableListItem(key);
      this.ul.append(li);
    })
    console.log('this.ul');
    console.log(this.ul);
    return this.ul;
  }
  updateTable(data) {
    var currentData = this.data;
    var currentKeys = Object.keys(currentData);
    var newData = data;
    var newKeys = Object.keys(newData);
    var deltaPositive = newKeys.filter(x => !currentKeys.includes(x));
    deltaPositive.forEach(key => {
      this.data[key] = newData[key];
      this.generateTableListItem(key);
    });
    console.log('this.ul');
    console.log(this.ul);
    return this.ul;
  }
}

如果有人能给我指出正确的方向，那将是一个很大的帮助

编辑：

如果我使用vanilla js将事件处理程序附加到它工作的元素上。 使用Jquery的on方法，我看到了上面提到的错误。请参见下面的vanilla js事件处理程序

hdrPlayIcon[0].addEventListener('click',function(e){
  status = e['target'].getAttribute("data-run-status");
  if(status === 'running') {
    e['target'].classList = ''
    e['target'].classList = 'fa fa-play float-right';
    e['target'].setAttribute("data-run-status", "notrunning");
    this.runTaskQueue.clearTaskQueue();
  }
  else {
    e['target'].classList = ''
    e['target'].classList = 'fa fa-pause float-right';
    e['target'].setAttribute("data-run-status", "running");
    this.runTaskQueue.enqueueTaskList(this.selected);
  }
}.bind(this));

---

为什么Jquery的on函数不起作用？

只需使用以下方法删除单击侦听器

---

document.getElementByIdmyDIV.removeEventListenerclick，myFunction

这个解决方案有什么问题吗？

hdrPlayIcon[0].addEventListener('click',function(e){
  status = e['target'].getAttribute("data-run-status");
  if(status === 'running') {
    e['target'].classList = ''
    e['target'].classList = 'fa fa-play float-right';
    e['target'].setAttribute("data-run-status", "notrunning");
    this.runTaskQueue.clearTaskQueue();
  }
  else {
    e['target'].classList = ''
    e['target'].classList = 'fa fa-pause float-right';
    e['target'].setAttribute("data-run-status", "running");
    this.runTaskQueue.enqueueTaskList(this.selected);
  }
}.bind(this));