问题：通过js给页面添加新元素，并给该元素添加绑定事件，但新添加的元素上却没有绑定任何事件。
常见例子：在处理表格的时候，每行行末有个删除按钮，如下图。点击删除按钮的时候删除这一行。
//html部分
<table border="" cellspacing="" cellpadding="" class="text-center">
<caption class="text-center">用户信息表</caption>
<tr>
<td>序号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>
<a class="deltr">删除</a>
</td>
</tr>
</table>
<button class="btn btn-info">添加</button> //js部分
$(function() {
$("button").on("click", function() {
$("table").append('<tr><td>2</td><td>张三</td><td>男</td><td>18</td><td><a class="deltr">删除</a></td></tr>');
})
$(".deltr").on("click", function() {
$(this).parents("tr").remove();
})
})
如果上图中的删除按钮在dom操作前就在页面中的话，给其添加是可以的；如果表格中的每行都是通过dom操作添加的话，可以发现，删除按钮上却没有绑定任何事件。那么要怎么做才可以给dom生成的元素添加事件呢？
方法一：onclick法
$(function() {
$("button").on("click", function() {
$("table").append('<tr><td>2</td><td>张三</td><td>男</td><td>18</td><td><a onclick="deltr(this)">删除</a></td></tr>');
})
})
function deltr(delbtn){
$(delbtn).parents("tr").remove()
}
ps：该方法没有实现结构与行为分离的准则。关于dom操作添加事件一般采用的都是该方法。
注意：此时的deltr这个function必须是全局函数，得放在$(function(){})外面，放里面就成局部函数了，html里的onclick就调用不到了。
方法二：DOM 生成事件后绑定
在dom操作生成元素之后，添加事件。如下
$(function() {
$("button").on("click", function() {
$("table").append('<tr><td>2</td><td>张三</td><td>男</td><td>18</td><td><a>删除</a></td></tr>');
$("table a").on("click",function(){
deltr($(this));
})
})
})
function deltr(delbtn){
$(delbtn).parents("tr").remove()
}
方法三： 事件委托
$("body").on("click", "table a", function(){
deltr($(this));
})
运行此段代码，会发现功能根本无法实现。这是因为此时函数内的 this 指向 body；
$("body").on("click", "table a", function(e){
if(e.target.nodeName = "a"){
console.log($(this))
}
})
因为事件是冒泡的，所以我们要阻止冒泡到 body 之前，使用 e.target 截取到触发事件的元素上。