单击后如何更改按钮的attr和id？ 用jquery？

我试图让一个按钮动态更改其onclick和id属性。 但是对于一些人来说，我只能在第一次更改这些属性。

http://jsfiddle.net/WJTD5/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").click(function () { window.alert("im changing id to btn1 and hey hey"); $("#btn2").val("hey hey"); $("#btn2").attr("id", "btn1"); }); 

这是一个例子。 我看到id已经改变了，但是调用了错误的onclick函数。

我想要完成的是以下内容：

• 用户在表单上输入一些东西，然后单击搜索 – >应该返回一些数据
• 如果有数据，那么按钮应该更改其ID和onclick
• 如果没有，保持不变

Answer 1

您在id更改为btn2之前附加事件，因此$("#btn2")是一个空集合。 在第一个回调中绑定click处理程序，如下所示：

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

这是一个演示： http ： //jsfiddle.net/73zA2/

或者，您可以将事件处理委托给元素的祖先：

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

以下是该方法的演示： http ： //jsfiddle.net/2YKFG/

Answer 2

我建议你使用更高元素的委托来绑定点击，即：

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

这是jsFiddle中的解决方案： http ： //jsfiddle.net/WJTD5/4/

Answer 3

您是否有理由更改元素的ID？ 我不推荐它，而是选择使用类。 这是一个例子：

 $("#btn1").click(function () { if ($(this).hasClass("state1")){ window.alert("im changing id to btn2 and ho ho ho"); $(this).val("ho ho ho"); $(this).toggleClass("state1 state2"); } else { window.alert("im changing id to btn1 and hey hey"); $(this).val("hey hey"); $(this).toggleClass("state1 state2"); } }); 

http://jsfiddle.net/WJTD5/2/