javascript - Jquery中click事件重复执行的问题
Jquery版本1.11.0
问题：点击修改链接，在弹出的对话框中，点提交按钮，click事件会执行多次。而用原生js则没有问题。
并且提交后，第二次提交后，多个数据都变成一个了。
代码如下：
点击了多少次修改，点提交时就会alert出多少个222222
http://jsfiddle.net/D7eEd/
出问题部分用原生js实现：
http://jsfiddle.net/vowmmm/n5yzy/
个人认为原因是：
click事件里不能包含click事件？不知道是不是这样。
为方便查看，附带整个文档
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">
<head>
<title>Document</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
* {margin: 0; padding: 0;}
#table {border: 1px solid gray; border-collapse: collapse; width: 500px;}
tr {height: 30px;}
th {border: 1px solid gray;}
td {border: 1px solid gray;text-align: center;}
td a {margin-right: 5px; color: blue; text-decoration: none;}
#popp, #editp {border: 1px solid silver; width: 315px; padding: 1px; margin-top: 10px; position: absolute; left: 38%; z-index: 4; display: none;}
.pop p {height: 30px; margin-top: 20px; clear: both;}
.pop a {display: block; float: right; text-decoration: none; font-size: 12px;}
.pop .input {height: 20px; line-height: 20px;}
/*#bottom {width: 100%; height: 30px; margin: 0 auto;}*/
#sub {display: block; height: 30px; margin: 0 auto;}
.mask {background-color: #000; position: absolute; left: 0; top: 0; z-index: 2;}
</style>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script>
</head>
<body>
<table id="table">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职位</th>
<th>工资</th>
<th>操作</th>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>PHP</td>
<td>79999</td>
<td><a href="#" class="edit">修改</a></td>
</tr>
<tr>
<td>李四</td>
<td>21</td>
<td>Java</td>
<td>12000</td>
<td><a href="#" class="edit">修改</a></td>
</tr>
<tr>
<td>王五</td>
<td>34</td>
<td>Python</td>
<td>29999</td>
<td><a href="#" class="edit">修改</a></td>
</tr>
<tr>
<td>赵六</td>
<td>37</td>
<td>Javascript</td>
<td>65450</td>
<td><a href="#" class="edit">修改</a></td>
</tr>
</table>
<p id="editp" class="pop">
<a href="#" class="close">close</a>
<p><strong>姓名：</strong><input type="text" class="input" /></p>
<p><strong>年龄：</strong><input type="text" class="input" /></p>
<p><strong>职位：</strong><input type="text" class="input" /></p>
<p><strong>工资：</strong><input type="text" class="input" /></p>
<input type="button" id="sub" value="提交" />
</p>
<script type="text/javascript">
// 点击'修改'链接
$('a.edit').click(function () {
var arr = [];
$(this).parent().siblings().each(function () {
arr.push($(this).text());
});
$('#editp').show().find('p').each(function (i) {
$(this).find('input:text').val(arr[i]);
});
var aTr = $(this);
$('#sub').click(function () {
alert('2222222');
var data = [];
$(this).prevUntil('a.close').each(function () {
data.push($(this).find('input:text').val());
});
data.reverse();
aTr.parent().siblings().each(function (i) {
$(this).text(data[i]);
});
$(this).parent().hide();
$('p.mask').remove();
});
// 原生JS实现点击，没有问题
/*document.getElementById('sub').onclick = function () {
alert('1111111');
var data = [];
$(this).prevUntil('a.close').each(function () {
data.push($(this).find('input:text').val());
});
data.reverse();
aTr.parent().siblings().each(function (i) {
$(this).text(data[i]);
});
$(this).parent().hide();
$('p.mask').remove();
};*/
// 添加遮罩层
var maskHeight = $(document).height();
var maskWidth = $(document).width();
$('<p class="mask"></p>').appendTo($('body'));
$('p.mask').css({
'width':maskWidth,
'height':maskHeight,
'opacity':0.4
});
});
$('a.close').click(function () {
$(this).parent().hide();
$('p.mask').remove();
});
</script>
</body>
</html>
