如何监听 jquery.tabledit 的确认按钮事件？

如何解决如何监听 jquery.tabledit 的确认按钮事件？

我有一个带有 jquery.tabledit 的 html 表。它有一个编辑按钮和一个删除按钮。单击删除时，它会显示一个确认按钮。我希望在单击确认按钮时更新表格（当行被删除时）。截至目前，删除选项有效，但只有在我手动刷新页面时才会显示结果。

请参考此答案Demo Code.

此解决方案改编自保存按钮的工作示例：

        // When click on confirm,page reloads
        $(document).on("click",".tabledit-confirm-button",function () {
            // Reload the table
            $('#editable_table').DataTable();
            // Reload the Page
            window.location.reload(false);
        })

我也试过这个

    // When click on confirm,page reloads
    $(document).on("click",function () {

        // Reload page after 0.5 seconds
        $(document).ready(function () {
            setTimeout(function () {
                alert('Reloading Table');
                location.reload(true);
            },500);
        });
    })

问题似乎是按钮永远不会被识别为点击。 alert('Reloading Table'); 从未出现。

$('#editable_table').tabledit({
  //some codes...
  columns: {
    identifier: [0,"user_id"],editable: [
      [1,'first_name'],[2,'last_name'],[3,'email'],]
  },hideIdentifier: true,autoFocus: true,saveButton: true,restoreButton: false,onSuccess: function(data,textStatus,jqXHR) {
    var htmlString = "<?PHP echo 'User information has been updated'; ?>";
    alert(htmlString);

    // custom action buttons
    if (data.action === 'delete') {
      $('#' + data.id).remove();
    }
  }


});

$(document).on("click",".tabledit-edit-button",function() {
  //get closest tr and then find slectBox and disable same
  $(this).closest("tr").find("[name=selectBox]").removeAttr('disabled')

  $(this).closest("tr").find("[name*=roles_checkBox],.dropdown-toggle ").removeAttr('disabled') //remove attr from button as well
  $(this).closest("tr").find(".dropdown-toggle").removeClass('disabled') //remove disable class from button
})
$('.roles_checkBox').multiselect({
  includeselectAllOption: true,nonSelectedText: '--Select Role--',buttonWidth: '150px'
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.16/css/bootstrap-multiselect.css" integrity="sha512-DJ1SGx61zfspL2OycyUiXuLtxNqA3GxsXNinUX3AnvnwxbZ+YQxBARtX8G/zHvWRG9aFZz+C7HxcWMB0+heo3w==" crossorigin="anonymous"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.16/js/bootstrap-multiselect.min.js" integrity="sha512-ljeReA8Eplz6P7m1hwWa+XdPmhawNmo9I0/qyZANCCFvZ845anQE+35TuZl9+velym0TKanM2DXVLxSJLLpQWw==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-tabledit@1.0.0/jquery.tabledit.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<table class="table table-bordered" id="editable_table">
  <thead class="thead-dark">
    <tr>
      <th>user_id</th>
      <th>first_name</th>
      <th>last_name</th>
      <th>email</th>
      <th>Approved</th>
      <th>Something</th>
      <th class="tabledit-toolbar-column"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        1
      </td>
      <td>
        Something..
      </td>
      <td>
        Something..1
      </td>
      <td>
        [e-mail]
      </td>
      <td>
        <form method='POST'>
          <select disabled name='selectBox' onchange='this.form.submit()'>
            <option value='Approved' selected>Approved</option>
            <option value='disapproved'>disapproved</option>
          </select>
        </form>
      </td>

      <!--User Roles-->
      <td>
        <form method='POST'>
          <select disabled class='roles_checkBox' multiple='multiple' name="roles_checkBox[]" onchange='this.form.submit()'>
            <option value="1">Option 1</option>
            <option value="2" selected="selected">Option 2</option>

            <option value="3" selected="selected">Option 3</option>
            <option value="4">Option 4</option>
          </select>

        </form>
      </td>
    </tr>
    <tr>
      <td>
        2
      </td>
      <td>
        Something..
      </td>
      <td>
        Something..2
      </td>
      <td>
        [e-mail]
      </td>
      <td>
        <form method='POST'>
          <select disabled name='selectBox' onchange='this.form.submit()'>
            <option value='Approved' selected>Approved</option>
            <option value='disapproved'>disapproved</option>
          </select>
        </form>
      </td>

      <!--User Roles-->
      <td>
        <form method='POST'>
          <select disabled class='roles_checkBox' multiple='multiple' name="roles_checkBox[]" onchange='this.form.submit()'>
            <option value="1">Option 1</option>
            <option value="2" selected="selected">Option 2</option>
            <!-- Option 3 will be selected in advance ... -->
            <option value="3" selected="selected">Option 3</option>
            <option value="4">Option 4</option>
          </select>

        </form>
      </td>
    </tr>
  </tbody>
</table>