jquery给动态生成的元素绑定事件，on函数

首先先解释一下什么是动态生成的元素：动态生成的元素即我们用jquery的内部插入函数append()所生成的html代码。相对的也有静态生成的元素：即直接编写在页面的html代码。

下面通过例子来讲解：

html中有这样一个table：

 1 <div class="table-responsive">
 2                         <table class="table  table-bordered">
 3                             <thead>
 4                             <tr>
 5                                 <th width="30">#</th>
 6                                 <th width="30"><input type="checkbox"></th>
 7                                 <th>名称</th>
 8                                 <th width="100">操作</th>
 9                             </tr>
10                             </thead>
11                             <tbody id="rolePageBody">
12                             </tbody>
13                             <tfoot>
14                             <tr>
15                                 <td colspan="6" align="center">
16                                     <div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
17                                 </td>
18                             </tr>
19
20                             </tfoot>
21                         </table>
22                     </div>

这是一个JavaScript函数：作用是动态的生成html代码将pageInfo中的数据显示在上边的tbody中

 1 // 填充表格
 2 function fillTableBody(pageInfo) {
 3     // 判断pageInfo对象是否有效
 4     if(pageInfo == null || pageInfo == undefined || pageInfo.list == null || pageInfo.list.length == 0) {
 5         $("#rolePageBody").append("<tr><td colspan='4' align='center'>抱歉！没有查询到您搜索的数据！</td></tr>");
 6
 7         return ;
 8     }
 9
10     // 使用pageInfo的list属性填充tbody
11     for(var i = 0; i < pageInfo.list.length; i++) {
12
13         var role = pageInfo.list[i];
14
15         var roleId = role.id;
16
17         var roleName = role.name;
18
19         var numberTd = "<td>"+(i+1)+"</td>";
20         var checkboxTd = "<td><input id='"+roleId+"' class='itemBox' type='checkbox'></td>";
21         var roleNameTd = "<td>"+roleName+"</td>";
22
23         var checkBtn = "<button type='button' class='btn btn-success btn-xs'><i class=' glyphicon glyphicon-check'></i></button>";
24
25         // 通过button标签的id属性（别的属性其实也可以）把roleId值传递到button按钮的单击响应函数中，在单击响应函数中使用this.id
26         var pencilBtn = "<button id='"+roleId+"' type='button' class='btn btn-primary btn-xs pencilBtn'><i class=' glyphicon glyphicon-pencil'></i></button>";
27
28         // 通过button标签的id属性（别的属性其实也可以）把roleId值传递到button按钮的单击响应函数中，在单击响应函数中使用this.id
29         var removeBtn = "<button id='"+roleId+"' type='button' class='btn btn-danger btn-xs removeBtn'><i class=' glyphicon glyphicon-remove'></i></button>";
30
31         var buttonTd = "<td>"+checkBtn+" "+pencilBtn+" "+removeBtn+"</td>";
32
33         var tr = "<tr>"+numberTd+checkboxTd+roleNameTd+buttonTd+"</tr>";
34
35         $("#rolePageBody").append(tr);
36     }
37
38 }

这样问题就来了，如果我们用传统的click方法绑定动态生成的button（上边代码第31行就是动态生成的button），就会出现问题，当我们翻页的时候，页面的按钮就又会重新生成，此时click就不会绑定到重新生成的按钮上，从而再次点击按钮时没有响应。

传统的click方法绑定动态生成的button：

$(".pencilBtn").click(function () {
      alert("xxx");
});

此时要解决这个问题，就要用到jquery的事件处理函数on()方法。

on函数有三个参数：

• 第一个参数需要传入事件类型：　　           注意：事件类型是不带小括号的，不要写成click(),应该写click
  • 　　例如单击事件就传入click，失去焦点事件传入blur，表单提交事件传入submit。
• 第二个参数需要传入要绑定事件的元素的选择器。           注意：元素选择器不要写成$("#xxxx")，直接写#xxx就可以了
• 第三个参数需要传入事件的响应函数。

<script type="text/javascript">
    $(function(){
        // ①首先找到所有“动态生成”的元素所附着的“静态”元素
        // ②on()函数的第一个参数是事件类型
        // ③on()函数的第二个参数是找到真正要绑定事件的元素的选择器
        // ③on()函数的第三个参数是事件的响应函数
        $("#rolePageBody").on("click",".pencilBtn",function(){
            alert("xxx");
        });
    });
</script>

注：“动态生成”的元素所附着的“静态”元素，即js动态生成的html元素在html页面的父标签，例如上边代码中所有动态生成的html代码都要附着在id=rolePageBody的tbody中，所以需要动过这个依附的tbody对象来调用on方法。