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

OR

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

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

首次加载＆＃39;保存＆＃39;点击工作，因为按钮具有ID保存，更改后元素已获得ID＆＃39;更新＆＃39;但是没有触发更新点击。

我做错了什么？

由于

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

或委托方法

$("#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?

Answer 2

更改元素的id并不是一个好主意，因为它们是静态的。

话虽这么说，在DOM加载时附加事件处理程序时，您的代码不起作用。因此，无论其id如何，都会将相同的事件绑定到该元素。要实现所需，您需要使用委托事件处理程序，如下所示：

$(document).on('click', "#save", function() {
    console.log('save');
}).on('click', "#update", function() {
    console.log('update');
});

请注意，此处仅使用document作为示例。在生产代码中，您应该使用在页面加载时DOM中可用的最接近的父元素。

Answer 3

您正在更改元素的id id，您需要事件委托才能将事件附加到dynamicaaly添加的元素。

但是，不需要为切换按钮值创建不同的处理程序。您可以简单地获取值并提醒并根据它设置新值：

$("#save").click(function() {
 var _this = $(this);
 if(_this.val() == "save"){
   alert('save');
   _this.val('update');
 }else{
   alert('update');
   _this.val('save');
  }
});

Answer 4

你必须阅读课程。 Jquery在页面加载时创建与对象的链接，并且无法使用新的id值引用对象。

  $(".act").click(function() {
      var idobject = $(this).attr("id");
      alert($('#'+idobject).val());
  });

更改按钮ID和值使click（）事件失败

4 个答案: