如何为jquery中append()添加的html绑定事件

1.问题描述：

如图所示，利用jquery实现如下功能：

火狐截图_2017-11-21T02-29-56.437Z.png

会发现，表格的每一行新纪录都是用jquery的append（）方法动态的添加上的html，在为每一行的“delete”绑定click事件的时候无法获取新添加的元素。

2.解决方案

方案一：

append追加元素后，紧接着再利用find（）方法找到新追加的元素，为其添加事件，具体代码如下：

            $(function(){
                // 删除
                $("a").click(function(){
                    var $tr = $(this).parent().parent();
                    $tr.remove();
                });
                // 添加
                $("#addButton").click(function(){
                    var $name = $("#name").val().length!=0?$("#name").val():null;
                    var $email = $("#email").val().length!=0?$("#email").val():null;
                    var $salary =  $("#salary").val().length!=0?$("#salary").val():null;
                    
                    if($name && $email && $salary){
                        
                        $("<tr></tr").append("<td>"+$name+"</td>")
                        .append("<td>"+$email+"</td>")
                        .append("<td>"+$salary+"</td>")
                        .append("<td><a href='#'>Delete</a></td>")
                        .appendTo("table")
                        .find("a").click(function(){// 删除
                            var $tr = $(this).parent().parent();
                            $tr.remove();
                        });
                    }
                });
                
            });

方案二：

度娘推荐的方法，包含liv（）方法和on（）方法，为appen（）动态添加的元素绑定事件，但是live（）方法在 jQuery 版本 1.7 中被废弃，在版本 1.9 中被移除，现用on（）方法代替。

on（）定义和用法

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

语法：$(selector).on(event,childSelector,data,function)

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

由此可见，可以为新添加的元素绑定事件。但是值得注意的是，该事件是委托在已知选择器获取的父级对象上的。具体如下面代码所示：

$(function(){
                
                var i = 0;
                $(":submit").click(function(){
                    
                    $("table").append($("<tr><td>"+$("#name").val()+"</td><td>"+$("#email").val()+"</td><td>"+$("#salary").val()+"</td><td><a id='"+i+"' href='#'>delete</a></td></tr>"));
                    $("table").on("click","#"+i+"",function(i){
                        $(this).parent().parent().remove();
                    });
                    
                    i++;
                });
                        
            });

可以看到，事件委托在了已存在的“table”上。