动态添加的元素如何绑定事件

在代码中常常会遇到动态添加html标签的要求，并且还会为添加的标签绑定事件，但如何为动态标签添加事件，我总结了自己的方法。

例如：

在一个table的标签中动态添加th和td，某一个td中会添加button来进行增删改插的功能，如下图：
<table class="table table-bordered">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>电话</th>
<th>操作</th>
</tr>
</table>动态添加表格
var list='<tr><td>李明</td><td>男</td><td>20</td><td>88888888888</td><td><button type="button" id="select">按钮</button></td></tr>';
$("table").append(list)给button添加点击事件时背景变红：
$("#select").on("click",function () {
$(this).closest("tr").addClass("bg-danger")
});点击按钮没有反应



怎么办？我们来好好看一看jquery on的API

这是就要用到selector这个参数了，代码如下：$("table").on("click","#select",function () {
$(this).closest("tr").addClass("bg-danger")
});这时就能绑定事件了,

注意：

1.这种方法绑定事件必须绑定你要绑定事件元素的父元素上，如上边案例就绑定在table上，最好是静态的存在的元素。
2.on方法的选择器可以是各种元素选择器，id，class等。
3.在对事件处理时可以用$(this)选取当前元素进行操作，最好将$(this)存为一个变量方便操作。