JavaScript函数变量存储与重复绑定click事件导致多次弹窗问题

问题成因 #

你遇到的重复弹窗问题由两个特性共同导致：

1. jQuery的.click()方法绑定事件为追加逻辑而非覆盖：每次调用testFunction时，都会给#alert-btn新增一个独立的点击事件处理函数，之前绑定的逻辑不会被清空。
2. 闭包特性：每个新增的点击处理函数都会捕获当时传入的cust_num值并独立保留，不会被后续新传入的值覆盖。你点击过多少次submit类按钮，就会给alert按钮绑定多少个事件处理函数，点击alert按钮时所有函数会依次触发，就会出现连续弹窗的情况。

修复方案 #

方案1：绑定前清空旧事件（改动最小） #

修改testFunction，每次绑定新事件前先调用.off('click')移除之前绑定的所有点击事件，确保alert按钮始终只有一个最新的事件逻辑：

function testFunction(cust_num) {
  $("#alert-btn").off('click').click(function() {
    alert(cust_num);
  })
}

方案2：仅绑定一次alert事件，用变量存储最新值（性能更优） #

不用每次点击submit都重新绑定事件，直接用一个变量存储最新的编号，alert按钮的事件全局只绑定一次，永远读取最新值即可：

// 存储最新的客户编号
let latestCustNum = null;

$(".submit-btn1").click(function() {
  latestCustNum = parseInt(this.id.replace('test-button-', ''), 10);
})
$(".submit-btn2").click(function() {
  latestCustNum = parseInt(this.id.replace('test-button-', ''), 10);
})

// alert按钮仅绑定一次事件
$("#alert-btn").click(function() {
  if (latestCustNum) {
    alert(latestCustNum);
  }
})

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