了解函数如何使用和存储变量

Question

我很抱歉，这已在其他地方被问过/回答过。我可能不知道找到所需结果的正确术语。

我正在构建一种 Web 应用程序，在一个区域中，用户单击按钮，从按钮 ID 末尾的数字获取变量，然后将其传递给其他函数以用于进一步处理。我遇到的问题是，随后每次单击类似的按钮时，先前单击的变量仍然存储在这些函数中。

JavaScript 不是我的强项，所以我构建了一个小小提琴，以更小的规模演示我的问题。如果您单击小提琴中的“Submit 1”，然后单击 ALERT CUST_NUM，警报框将显示变量的值。但是，如果您使用“提交 1”或“提交 2”重复该过程（然后再次单击“警报”按钮），则不会警报变量的单个实例，而是会依次显示多个警报框。依此类推，如果您单击“提交 1”，然后单击“警报 CUST_NUM”，然后单击“提交 2”，等等，这样它将在一系列窗口中提醒变量链。我希望有人能解释为什么会发生这种情况，因为我预计函数中只存在一个变量实例，每次都会被覆盖。

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="submit-btn1" id="test-button-1">
Submit 1
</button>
<br/>
<button class="submit-btn2" id="test-button-2">
Submit 2
</button>
<br/>
<button id="alert-btn">
ALERT CUST_NUM
</button>

Answer 1

每次单击submit-btn1或时submit-btn2，您都会添加一个新的事件处理程序，并将cust_num其烘焙到 中alert-btn。如果您清除了以前的事件处理程序，如下所示：

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

那么你就只有一个事件处理程序。

更好的方法是创建一个事件处理程序，如下alert-btn所示：

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

var cust_num = 0;

$(document).ready(function() {

    $(".mybuttons").click(function(){ 
        cust_num = parseInt(this.id.replace('test-button-',''), 10);
    })

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