jQuery 推出on()的目的有2个，一是为了统一接口，二是为了提高性能，所以从现在开始用on()替换bind(), live(), delegate吧。尤其是不要再用live()了，因为它已经处于不推荐使用列表了，随时会被干掉。如果只绑定一次事件，那接着用one()吧，这个没有变化。
开始的时候写的代码如下，发现新生成的元素删除和添加点击都没反应，：
$('.add a').on('click', function() {
$('tbody').append('<tr><td>1</td><td class="del">111</td><td class="del"><a href="#">删除</a></td><td class="add"><a href="#">添加</a></td></tr>')
for (var i = 0; i < $('tbody>tr').length; i++) {
$('tbody>tr>td:first-child:eq(' + i + ')').text(i + 1);
};
});
修改代码如下，发现有效果了：
$('tbody').on('click','.add a', function() {
$('tbody').append('<tr><td>1</td><td class="del">111</td><td class="del"><a href="#">删除</a></td><td class="add"><a href="#">添加</a></td></tr>')
for (var i = 0; i < $('tbody>tr').length; i++) {
$('tbody>tr>td:first-child:eq(' + i + ')').text(i + 1);
};
});
最终代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table 排序</title>
<script type="text/javascript" src="js/jquery-2.2.1.min.js"></script>
<style>
table {
border: 1px solid red;
}
th,
td {
padding: 10px;
text-align: center;
}
</style>
<script>
$(function() {
var hang = $('tbody>tr').length;
for (var i = 0; i < $('tbody>tr').length; i++) {
$('tbody>tr>td:first-child:eq(' + i + ')').text(i + 1);
};
$('tbody').on('click','.del a', function() {
$(this).parent().parent().remove();
for (var i = 0; i < $('tbody>tr').length; i++) {
$('tbody>tr>td:first-child:eq(' + i + ')').text(i + 1);
};
});
$('tbody').on('click','.add a', function() {
$('tbody').append('<tr><td>1</td><td class="del">111</td><td class="del"><a href="#">删除</a></td><td class="add"><a href="#">添加</a></td></tr>')
for (var i = 0; i < $('tbody>tr').length; i++) {
$('tbody>tr>td:first-child:eq(' + i + ')').text(i + 1);
};
});
})
</script>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>num</th>
<th>main</th>
<th>del</th>
<th>add</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td class="del">111</td>
<td class="del"><a href="#">删除</a></td>
<td class="add"><a href="#">添加</a></td>
</tr>
<tr>
<td>1</td>
<td class="del">222</td>
<td class="del"><a href="#">删除</a></td>
<td class="add"><a href="#">添加</a></td>
</tr>
<tr>
<td>1</td>
<td class="del">333</td>
<td class="del"><a href="#">删除</a></td>
<td class="add"><a href="#">添加</a></td>
</tr>
</tbody>
</table>
</body>
</html>
