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

Question

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

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

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

$(".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 创建单个事件处理程序，如下所示:

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);
    })
});

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