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方法。