jQuery 编辑本行时可以保存，但是新增一行时，输入数据，却不能保存

正常的操作描述如下：
1、点击[b]Edit[/b]时，可编辑数据，然后点击[b]Save[/b]，显示编辑后的数据；
2、点击[b]Add[/b]时，表格添加一行，可在输入框输入数据，然后点击[b]Save[/b]，显示输入的数据；

[/table]

问题是点击[b]Add[/b]，输入数据，点击[b]Save[/b]无反应啊，求教是什么原因？
下面的代码可以直接复制粘贴运行。

[code="java"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <title>无标题文档</title>
    <style type="text/css">
        #test {
            border: solid 1px
        }

        #test td {
            border: solid 1px;
            width: 200px
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function(){  
        $trs = $("tr");//

        var head = true;
        var editVal = {};//编辑时存储原始值

        var button = "<td><a href='#' class='add'>Add</a> <a href='#' class='edit'>Edit</a> <a href='#' class='save'>Save</a>";
        $trs.each(function (i, tr) {//添加操作列
            if (head) {
                $(tr).append("<td>Action</td>");
                head = false;
                return true;
            }
            $(tr).append(button);
        });

        $(".save").hide();//隐藏确定、取消按钮；只有在添加、编辑状态时显示

       /**
        *  正常状态下的添加事件
        *  在当前行下插入一行
        */
        $(".add").click(function(){

            var $tr = $(this).parents("tr");
            var tr = $("<tr>");
            var count = $("td", $tr).length;

            $("td",$tr).each(function(i){
                if(i<count-1){
                    tr.append($("<td>").html($("<input>")));
                }
            });

            tr.attr("pId",$tr.attr("id"));
            tr.append(button);
            $tr.after(tr);

            $(".add, .edit").hide();
            $(".save", tr).show();
            return false;
        });

        /**
         *  正常状态下的编辑事件
         *  
         */
       $(".edit").click(function () {
            var $tr =$(this).parents("tr");
            var count = $("td",$tr).length;

            $("td",$tr).each(function(i){
                if(i<count-1){
                    //编辑前应保存原始值
                    editVal[i] = $(this).text();
                    $(this).html($("<input>").val($(this).text()));
                }
            });

            $(".add, .edit").hide();
            $(".save", $tr).show();
            return false;
       });

        /**
         *  编辑状态下的保存事件
         *  添加状态下的取消事件
         */
       $(".save").click(function () {
            var $tr =$(this).parents("tr");
            var count = $("td",$tr).length;

            $("td",$tr).each(function(i){
                if(i<count-1){
                    //alert($(this).find("input").val());
                    $(this).html($(this).find("input").val());
                }
            });

            $(".add, .edit").show();
            $(".save", $tr).hide();
            return false;
       });

    });

</script>
</head>

<body>
    <table id="test">
        <thead>
            <tr>
                <td>
                    Id
                </td>
                <td>
                    Name
                </td>


            </tr>
        </thead>
        <tbody id="tbody">
            <TR id="1">
                <td>
                    0
                </td>
                <td>
                    abc
                </td>


            </TR>
            <TR id="2">
                <td>
                    1
                </td>
                <td>
                    1
                </td>


            </TR>
        </tbody>
    </table>
</body>

[/code]

没反应说明是你没有给save动态添加事件，也就是每个动态添加的save都是需要添加事件的。

你可以做个实验，把所有元素都SHOW，然后你的问题就不会出现了。我在想，应该是JQ对DISPLAY:NONE的元素会自动过滤掉，不会添加事件。

奥，这还不简单！异步数组提交就OK啦，你这里面肯定是有重复的ID。