javascript - onclick 一个按钮会自行移除并在数据表中显示其他按钮

Question

我有一个数据表，我试图在每一行中实现以下目标：

1. 我的最后一个列有 2 个按钮调整和重置，当调整可见时，重置不是，反之亦然。
2. 单击调整按钮时，我想执行一些功能，然后删除调整按钮并附加重置按钮，反之亦然

我已经尝试过了，我能够在页面加载时添加和删除按钮，但是附加的新按钮的点击功能不会触发。下面是它的JS

var column = {
    {
      title: "Adjust Time",
      render: function(data, type, row) {
        var html = '';
        if (status) html += '<button type="button" class="adjustBtn" id="adjustTime' + row.sl_no + '" onclick="adjust_time(' + row.id + ');">Adjust</button>';
        else html += '<button type="button" class="resetBtn" id="resetTime' + row.sl_no + '" onclick="reset_time(' + row.id + ');">Reset</button>';
      };
      return html;
    }

    //Datatable
    var table = $('#datatable').DataTable({
          'data': data,
          "columns": columns,
          "drawCallback": function(settings) {
            $(".adjustBtn").on("click", function() {
              var rowData = table.row($row).data();
              console.log(rowData.sl_no);

              var $resetBtn = $('<button type="button" class="resetBtn" id="resetTime' + rowData.sl_no + '">Reset</button>');
              $(this).parent().append($resetBtn);
              $(this).remove();

            });
            $(".resetBtn").on("click", function() {
              $(this).parents("tr").removeClass('updated');

              var $adjustBtn = $('<button type="button" class="adjustBtn" id="adjustTime' + rowData.sl_no + '">Adjust</button>');
              $(this).parent().append($adjustBtn);
              $(this).remove();


            });
          },
          "responsive": true
        }

标签： javascriptdatatables