首先先解释一下什么是动态生成的元素：动态生成的元素即我们用jquery的内部插入函数append()所生成的html代码。相对的也有静态生成的元素：即直接编写在页面的html代码。
下面通过例子来讲解：
html中有这样一个table：
1 <div class="table-responsive">
2 <table class="table table-bordered">
3 <thead>
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>
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>");
7 return ;
8 }
10 // 使用pageInfo的list属性填充tbody
11 for(var i = 0; i < pageInfo.list.length; i++) {
13 var role = pageInfo.list[i];
15 var roleId = role.id;
17 var roleName = role.name;
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>";
23 var checkBtn = "<button type='button' class='btn btn-success btn-xs'><i class=' glyphicon glyphicon-check'></i></button>";
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>";
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>";
31 var buttonTd = "<td>"+checkBtn+" "+pencilBtn+" "+removeBtn+"</td>";
33 var tr = "<tr>"+numberTd+checkboxTd+roleNameTd+buttonTd+"</tr>";
35 $("#rolePageBody").append(tr);
36 }
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方法。
yarn build 生成的路径
vue-cli 3.0 创建项目一、vue-cli3.0初始化安装@vue/cli注意：vue-cli3.0需要node8.9或更高版本（推荐8.11.0+）npm install -g @vue/cli
// 或者
yarn global add @vue/cli安装后，可检查其版本： 使用vue --version【注意：符号为双 “ - ”】或者vue -V【注意：此处是大写 “ V ”】
