给DOM操作生成的元素添加事件

问题：通过js给页面添加新元素，并给该元素添加绑定事件，但新添加的元素上却没有绑定任何事件。

常见例子：在处理表格的时候，每行行末有个删除按钮，如下图。点击删除按钮的时候删除这一行。

//html部分
    <table border="" cellspacing="" cellpadding="" class="text-center">
            <caption class="text-center">用户信息表</caption>
            <tr>
                <td>序号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>操作</td>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>男</td>
                <td>18</td>
                <td>
                    <a class="deltr">删除</a>
                </td>
            </tr>
        </table>
        <button class="btn btn-info">添加</button>



//js部分
$(function() {
            $("button").on("click", function() {
                $("table").append('<tr><td>2</td><td>张三</td><td>男</td><td>18</td><td><a class="deltr">删除</a></td></tr>');
            })
            $(".deltr").on("click", function() {
                $(this).parents("tr").remove();
            })
        })

View Code

如果上图中的删除按钮在dom操作前就在页面中的话，给其添加是可以的；如果表格中的每行都是通过dom操作添加的话，可以发现，删除按钮上却没有绑定任何事件。那么要怎么做才可以给dom生成的元素添加事件呢？

方法一：onclick法

$(function() {
　　$("button").on("click", function() {
　　　　$("table").append('<tr><td>2</td><td>张三</td><td>男</td><td>18</td><td><a onclick="deltr(this)">删除</a></td></tr>');
　　})

})
function deltr(delbtn){
　　$(delbtn).parents("tr").remove()
}

　ps：该方法没有实现结构与行为分离的准则。关于dom操作添加事件一般采用的都是该方法。

　注意：此时的deltr这个function必须是全局函数，得放在$(function(){})外面，放里面就成局部函数了，html里的onclick就调用不到了。

方法二：DOM 生成事件后绑定

　　在dom操作生成元素之后，添加事件。如下

$(function() {
　　$("button").on("click", function() {
　　　　$("table").append('<tr><td>2</td><td>张三</td><td>男</td><td>18</td><td><a>删除</a></td></tr>');

       $("table a").on("click",function(){
           deltr($(this));
       })
　　})

})
function deltr(delbtn){
　　$(delbtn).parents("tr").remove()
}

方法三：事件委托

$("body").on("click", "table a", function(){
 　　deltr($(this));
})

运行此段代码，会发现功能根本无法实现。这是因为此时函数内的 this 指向 body；

$("body").on("click", "table a", function(e){
 　　if(e.target.nodeName = "a"){
         console.log($(this))
    }
})

因为事件是冒泡的，所以我们要阻止冒泡到 body 之前，使用 e.target 截取到触发事件的元素上。