TypeScript中两个按钮二次点击事件不触发问题求助

我有两个并排按钮：Current year PR signature 和 Prior year PR signature。首次点击任一按钮时，能正常加载对应年度的表格数据；但第二次点击时，按钮的点击事件完全触发不了。需要让按钮在二次点击时也能正常响应事件。

相关代码如下：

// Button click event for Current Year PR Signatures
$('#SignatureMaintenance_Currentyearreporting_Button').on('click', function () {
  //logic
});

// Button click event for Prior Year PR Signatures
$('#SignatureMaintenance_Prioryearreporting_Button').on('click', function () {
  //logic
});

这种二次点击失效的核心原因几乎都是按钮元素被重新渲染或替换——比如加载表格时的DOM操作把原按钮覆盖了，或者动态生成了新的按钮节点，导致原本绑定的事件监听器跟着原元素一起消失了。下面是几种靠谱的解决办法：

1. 事件委托（优先使用） #

把事件绑定到不会被替换的父元素上，利用事件冒泡机制触发回调，哪怕按钮被重新生成，事件依然能生效：

// 尽量找按钮所在的最近静态父容器（不要直接用body，性能更好）
$('#按钮的静态父容器ID').on('click', '#SignatureMaintenance_Currentyearreporting_Button', function () {
  // 原来的逻辑代码
});

$('#按钮的静态父容器ID').on('click', '#SignatureMaintenance_Prioryearreporting_Button', function () {
  // 原来的逻辑代码
});

2. DOM更新后重新绑定事件 #

如果必须保留直接绑定的方式，就在每次表格加载完成、DOM更新完成后，重新给按钮绑定事件（注意先解绑避免重复触发）：

function setupButtonEvents() {
  // 先解绑原有事件，再绑定新的
  $('#SignatureMaintenance_Currentyearreporting_Button')
    .off('click')
    .on('click', function () {
      // 原来的逻辑代码
    });

  $('#SignatureMaintenance_Prioryearreporting_Button')
    .off('click')
    .on('click', function () {
      // 原来的逻辑代码
    });
}

// 页面初始化时绑定一次
setupButtonEvents();

// 在表格数据加载完成的回调里，再调用一次
// 比如AJAX请求成功后：
$.ajax({
  url: '你的数据接口',
  success: function(data) {
    // 渲染表格的逻辑代码
    setupButtonEvents(); // 重新绑定事件
  }
});

3. 检查按钮是否被禁用 #

排查你的//logic代码里，有没有在首次点击后给按钮加了disabled属性，如果有，记得在逻辑执行完成后移除禁用状态：

// 在按钮点击逻辑的最后，恢复按钮可用状态
$(this).prop('disabled', false);

内容的提问来源于stack exchange，提问作者Chetan Kambli