按钮id的改变导致点击事件的触发

Question

我尝试使用jquery创建一个click事件。

我想要的结果如下：

第一次点击加一次

第二次点击加一次

第三次点击加一&更改按钮的id和文本

第四次单击“向前”-+1&警报弹出。

但是，警报在第三次单击时弹出.

我的html：

<h1 id="number">0</h1>
<button id="next">Add 1</button>

我的jquery：

$(document).ready(function () {
      let num = 0;

      $("#next").click(function () {
        ++num;
        if (num > 2) {
          $("#next").html("Alert");
          $("#next").attr('id', 'alert');
          $("#number").html(num);
        } else {
          $("#number").html(num);
        }

      });
      $(document).on("click", "#alert", function () {
        alert(num);
      });
    });

我不知道我哪里出了问题，理论上这对我来说很好，但我对jquery还不熟悉，我肯定漏掉了什么。

Answer 1

在第三次点击

element.

• unbind #alert

• call e.stopPropagation()，以防止#next单击事件与#alert e.stopPropagation()相对应，使用$("#next").unbind("click");单击#next事件，否则在单击$("#next").unbind("click");时将触发$("#next").click

此外，不要忘记处理"#alert"单击事件中的警报和增量逻辑。

工作部件

​

$(document).ready(function () {
  let num = 0;
  $("#next").click(function (e) {
    ++num;
    if (num > 2) {
      $("#next").unbind("click");
      $("#next").html("Alert");
      $("#next").attr('id', 'alert');
      $("#number").html(num);
      e.stopPropagation();   
    } else {
      $("#number").html(num);
    }
  });
  $(document).on("click", "#alert", function () {
    ++num;
    alert(num);
    $("#number").html(num);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<h1 id="number">0</h1>
<button id="next">Add 1</button>

​

Answer 2

您可以尝试使用以下代码：

$(document).ready(function () {
      let num = 0;
       $(document).on("click", "#next", function () {
        num++;
        if (num > 2) {
          $("#next").html("Alert");
          $("#next").attr('id', 'alert');
          $("#number").html(num);
        } 
        else {
          $("#number").html(num);
        }

      });
      
 $(document).on("click", "#alert", function () {
        num++;
        $("#number").html(num);
         alert(num);
        });
    });

希望它能成功。