首先先解释一下什么是动态生成的元素：动态生成的元素即我们用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，失去焦点事件传入blur，表单提交事件传入submit。
- 第二个参数需要传入要绑定事件的元素的选择器。
- 第三个参数需要传入事件的响应函数。
<script type="text/javascript"> $(function(){ // ①首先找到所有“动态生成”的元素所附着的“静态”元素 // ②on()函数的第一个参数是事件类型 // ③on()函数的第二个参数是找到真正要绑定事件的元素的选择器 // ③on()函数的第三个参数是事件的响应函数 $("#rolePageBody").on("click",".pencilBtn",function(){ alert("xxx"); }); }); </script>
注：“动态生成”的元素所附着的“静态”元素，即js动态生成的html元素在html页面的父标签