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

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

下面通过例子来讲解：

html中有这样一个table：

<div class="table-responsive">
                        <table class="table  table-bordered">
                            <thead>
                            <tr>
                                <th width="30">#</th>
                                <th width="30"><input type="checkbox"></th>
                                <th>名称</th>
                                <th width="100">操作</th>
                            </tr>
                            </thead>
                            <tbody id="rolePageBody">
                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="6" align="center">
                                    <div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
                                </td>
                            </tr>

                            </tfoot>
                        </table>
                    </div>

 

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

// 填充表格
function fillTableBody(pageInfo) {
    // 判断pageInfo对象是否有效
    if(pageInfo == null || pageInfo == undefined || pageInfo.list == null || pageInfo.list.length == 0) {
        $("#rolePageBody").append("<tr><td colspan='4' align='center'>抱歉！没有查询到您搜索的数据！</td></tr>");
        
        return ;
    }
    
    // 使用pageInfo的list属性填充tbody
    for(var i = 0; i < pageInfo.list.length; i++) {
        
        var role = pageInfo.list[i];
        
        var roleId = role.id;
        
        var roleName = role.name;
        
        var numberTd = "<td>"+(i+1)+"</td>";
        var checkboxTd = "<td><input id='"+roleId+"' class='itemBox' type='checkbox'></td>";
        var roleNameTd = "<td>"+roleName+"</td>";
        
        var checkBtn = "<button type='button' class='btn btn-success btn-xs'><i class=' glyphicon glyphicon-check'></i></button>";
        
        // 通过button标签的id属性（别的属性其实也可以）把roleId值传递到button按钮的单击响应函数中，在单击响应函数中使用this.id
        var pencilBtn = "<button id='"+roleId+"' type='button' class='btn btn-primary btn-xs pencilBtn'><i class=' glyphicon glyphicon-pencil'></i></button>";
        
        // 通过button标签的id属性（别的属性其实也可以）把roleId值传递到button按钮的单击响应函数中，在单击响应函数中使用this.id
        var removeBtn = "<button id='"+roleId+"' type='button' class='btn btn-danger btn-xs removeBtn'><i class=' glyphicon glyphicon-remove'></i></button>";
        
        var buttonTd = "<td>"+checkBtn+" "+pencilBtn+" "+removeBtn+"</td>";
        
        var tr = "<tr>"+numberTd+checkboxTd+roleNameTd+buttonTd+"</tr>";
        
        $("#rolePageBody").append(tr);
    }

}

 

这样问题就来了，如果我们用传统的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方法。