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

在代码中常常会遇到动态添加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)存为一个变量方便操作。