解决Click Me按钮重复绑定事件导致多次弹出Alert的问题

问题核心在于：每次点击Click Me 1时，都会给Click Me 2按钮追加新的点击事件处理函数，多次点击后事件会叠加，导致点击Click Me 2时触发所有积累的事件。下面提供两种可行的解决方式：

方式一：绑定新事件前先解绑旧事件 #

在为.popup_btn绑定新的点击事件前，先通过.off('click')清除所有已绑定的点击事件，确保每次只有一个生效的点击事件：

$(".get_nubmers_btn").on("click", function() {
  var v_chk_txtbox = $(".numbers_input").val().trim();
  // 先清除popup_btn上所有已绑定的click事件
  $(".popup_btn").off('click');
  
  if (v_chk_txtbox.length != "") {
    $(".popup_btn").addClass("foo").removeClass("bar");
    $(".popup_btn").click(function() {
      alert(v_chk_txtbox);
    });
  } else {
    $(".popup_btn").addClass("bar").removeClass("foo");
    $(".popup_btn").click(function() {
      alert("input an number");
    });
  }
});

这里还优化了DOM查询：直接使用已获取的v_chk_txtbox变量，避免重复读取输入框值。

方式二：只绑定一次事件，根据状态执行逻辑 #

更高效的方式是给Click Me 2只绑定一次点击事件，在事件内部根据当前输入框的状态执行对应逻辑，完全避免重复绑定的问题：

// 一次性绑定Click Me 2的点击事件，仅执行一次
$(".popup_btn").on("click", function() {
  var v_chk_txtbox = $(".numbers_input").val().trim();
  if (v_chk_txtbox) {
    alert(v_chk_txtbox);
  } else {
    alert("input an number");
  }
});

// Click Me 1仅负责更新按钮样式状态
$(".get_nubmers_btn").on("click", function() {
  var v_chk_txtbox = $(".numbers_input").val().trim();
  $(".popup_btn").toggleClass("foo", !!v_chk_txtbox).toggleClass("bar", !v_chk_txtbox);
});

这种方式性能更好，逻辑更清晰：Click Me 1仅处理样式切换，Click Me 2的点击逻辑固定，无需每次重新绑定。

完整代码示例（方式二） #

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
  <style>
    div.messagebox {
      background-color: lightgray;
      padding: 10px 10px;
    }
  </style>
</head>
<body>
  <input type="number" placeholder="insert number" class="numbers_input">
  <button type="button" class="get_nubmers_btn">Click Me 1</button>
  <hr>
  <div class="messagebox">
    <p>Messagebox</p>
    <button type="button" class="popup_btn">Click Me 2</button>
  </div>
</body>
</html>

JavaScript

$(".popup_btn").on("click", function() {
  var v_chk_txtbox = $(".numbers_input").val().trim();
  if (v_chk_txtbox) {
    alert(v_chk_txtbox);
  } else {
    alert("input an number");
  }
});

$(".get_nubmers_btn").on("click", function() {
  var v_chk_txtbox = $(".numbers_input").val().trim();
  $(".popup_btn").toggleClass("foo", !!v_chk_txtbox).toggleClass("bar", !v_chk_txtbox);
});

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