jquery - 更改按钮 ID 和值使 click() 事件失败

Question

我的页面上有一个按钮，如下所示:

<input type='button' class='act' id='save' value='save'/>

在页面中，我有几个点击功能，例如:

$("#save").click(function() {
  alert ('save');
})

$("#update").click(function() {
  alert ('update');
})

在页面的其他地方使用以下 jquery，我正在更改按钮值和 id。

$(".act").attr("id", "save").attr("value", "save");

或者

$(".act").attr("id", "update").attr("value", "update");

查看该元素，我可以看到按钮 ID 和值正在更新。但更改后点击功能失效了。

首次加载时，“保存”单击会起作用，因为按钮具有 ID“保存”，更改后元素已获得 ID“更新”，但不会触发更新单击。

我做错了什么？

谢谢

Answer 1

试试这个

$("#btn1").click(function () {
window.alert("im changing id to btn2 and ho ho ho");
$("#btn1").val("ho ho ho");
$("#btn1").attr("id", "btn2");

$("#btn2").unbind("click").click(function () {
    window.alert("im changing id to btn1 and hey hey");
    $("#btn2").val("hey hey");
    $("#btn2").attr("id", "btn1");    
});
});

或委托(delegate)方法

$("#btn1").parent().on("click","#btn1", function () {
    window.alert("im changing id to btn2 and ho ho ho");
    $("#btn1").val("ho ho ho");
    $("#btn1").attr("id", "btn2");   
})
.on("click","#btn2",function () {
    window.alert("im changing id to btn1 and hey hey");
    $("#btn2").val("hey hey");
    $("#btn2").attr("id", "btn1");    
});

How to change the attr and id of a button after clicking? using jquery?