jQuery操作输出重复问题(click 事件中嵌套)

Q:

我的部分静态代码是：
<div class="main_container">
<div class="main_title">
管理首页<input type="button" value="编辑管理首页" name="edit_desc" class="edit_desc" />
</div>
</div>

JQ代码是：
$(document).ready(
function() {
$(".main_container input[name=edit_desc]").click(function() {
alert("hello");
$(this).attr("value", "确认保存").attr("name", "save_desc");
$(".main_container input[name=save_desc]").click(function() {
alert("test");
});
});
});
现在的是点击按钮，弹出hello，然后按钮值变成“确认保存”，然后在点击这个按钮，这是先弹出hello,接着再弹出test。

很不解。第二次点击不是应该只弹出test么？怎么重复弹出了hello呢？ 

 

 

A:

我调试了下这个代码。我的理解大概是$(document).ready(）中给input控件注册了一个click方法：弹出"hello".然后点击按钮之后再执行这个click事件中响应的方法：弹出"hello"和修改控件的两个属性后，再注册一个click方法。所以实际上这个控件此时有两个click事件响应方法。一个弹出"hello"，一个弹出"test"。以后每点击一次实际上增加一次click事件响应方法。所以出现的效果是点击按钮后弹出一个"hello"和弹出比上一次多一个数目的"test".