jquery html 动态添加元素绑定事件
点击表格每一行，弹出消息提醒。如果我们用js给表格添加一行，新添加的行点击事件失效。
当需要的内容还没有被插入时，选择器只会选择页面中已经存在的元素，所以事先没有存在元素是绑定不了事件的。
<html>
<head>
<title>动态添加元素绑定事件</title>
<style>
table{
border-collapse: collapse; /**设置小表格之间的间距为0*/
border-right:1px solid red;
border-top:1px solid red;
}
table tr td{
border-left:1px solid green;
border-bottom:1px solid green;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<body>
<br/>
<button onclick="addTr()">添加一行</button><br/><br/>
<table>
<tr>
<td>昵称</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr id="tr_id">
<td>东方不败</td>
<td>17</td>
<td>女</td>
</tr>
<tr id="tr_id">
<td>西方不败</td>
<td>24</td>
<td>男</td>
</tr>
</table>
</body>
</html>
<script>
function addTr(){
var html = '<tr id="tr_id">'+
'<td>南方不败</td>'+
'<td>19</td>'+
'<td>男</td>'+
'</tr>';
$('table').append(html);
}
//按钮“添加一行”，添加的数据不会执行该事件
$('table tr#tr_id').click(function(){
alert('点击了');
});
//undelegate() 从匹配元素移除一个被添加的事件处理器，现在或将来
//向匹配元素的当前或未来的子元素附加一个或多个事件处理器
//按钮“添加一行”，添加的数据会执行该事件
/*$("table").delegate("tr#tr_id", "click", function () {
alert('点击了');
});*/
</script>