JQuery - 更改元素ID不起作用[重复]

Question

我正在尝试通过动态更改按钮的 ID 来更改按钮的功能。

<srcipt>
$("#old-id").click(function func_P(){
  //Some code
  this.id = "new-id";
});
$("#new-id").click(function func_Q(){
  // some other code
});
$("#clear").click(function func_R(){
  $(".in").attr("id","new-id");
});
</script>

<body>
  <button id="old-id" class="in">Button A</button>
  <button id="clear">Clear</button>
</body>

但我面临的问题是，当我单击“按钮 A”时，id 会更改，但当我再次单击“按钮 A”时，func_P() 会再次执行，而我打算调用 func_Q。

Answer 1

使用.on函数绑定(live)点击。

$("#old-id").on('click', function func_P(e) {
  //Some code
  if (this.id == "old-id") {
    this.id = "new-id";
    console.log('old id clicked');
    e.stopPropagation()
  }
});
$(document).on('click', "#new-id", function func_Q() {
  // some other code
  console.log('new id clicked');
});
$("#clear").on('click', function func_R() {
  $(".in").attr("id", "old-id");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="old-id" class="in">Button A</button>
<button id="clear">Clear</button>

如果你想清除id，你应该改变：

$(".in").attr("id","new-id");

收件人：

$(".in").attr("id", "old-id");