Редактирование и удаление вновь добавленной строки таблицы с использованием Jquery

Question

Я добавляю новые строки динамически в существующую таблицу, первый столбец таблицы содержит кнопки «Редактировать и удалить».Я сталкиваюсь с двумя проблемами:

1. Не могу редактировать и удалять вновь добавленные строки, пробовал .live, но не могу заставить его работать
2. Не удается получить записьid вновь добавленных строк (ajax возвращает запись при добавлении новых строк).

Код выглядит следующим образом:

Добавление новых строк:

 <script type="text/javascript">
     $(function() {
         $('#btnSubmit').click(function() {

             var oEmployee = new Object();

             oEmployee.Title        = $("#Title").val();
             oEmployee.Middlename   = $("#MiddleName").val();
             oEmployee.Lastname     = $("#LastName").val();
             oEmployee.Email        = $("#Email").val();

             var DTO =  {'employee': oEmployee};

             var options = {
                 type: "POST",
                 url: "WebService.asmx/InsertEmployee",
                 data: JSON.stringify(DTO),
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 success: function(response) {
                     if (response.d != "") {
                         if (parseInt(response.d) >= 1) {
                             var contactID;
                             contactID = parseInt(response.d);
                             $('#tblEmployee tbody tr:first').after("<tr id=" + contactID + "><td><input type='button' class='newContactID' value='Edit'/>&nbsp;<input type='button' value='Delete'/></td><td align=center>" + contactID + "</td><td align=center>" + oEmployee.Title + "</td><td align=center>" + oEmployee.Middlename + "</td><td align=center>" + oEmployee.Lastname + "</td><td align=center>" + oEmployee.Email + "</td><tr>"); // need to hook up editing and deleting function to the newly added rows  }
                         else {
                             alert("Insert Failed \n" + response.d);
                         }
                     }
                 }
             };
             //Call the webservice
             $.ajax(options);
         });
     });                          
</script>

Код для редактирования и удаления:

$(function() {
    $("#tblEmployee > tbody > tr ").each(function() {
        var TRID = $(this).attr("id");
        $(this).find("td:first > input[value=Edit]").click(function() {
            ResetOtherRowEdit();
            ChangeTableCellToTextbox(TRID);
            $(this).hide();
            $("#tblEmployee > tbody >  tr[id=" + TRID + "] > td:first> input[value=Delete]").hide();
            return false;
        });

        $(this).find("td:first > input[value=Update]").click(function() {
            UpdateRow(TRID);
        });

        $(this).find("td:first > input[value=Delete]").click(function() {
            DeleteRow(TRID);
        });

        $(this).find("td:first > input[value=Cancel]").click(function() {
            CancelEdit(TRID);
        });           
    });
});

Как лучше всего подойти к этому?Редактирование и удаление записей работают нормально, когда они извлекаются из базы данных.

---

Обновление

Вот как выглядит код сейчас, только что начал баловатьсяс Jquery месяц назад, все еще пытаюсь разобраться в этом.

    $(function() {
        $("#tblEmployee > tbody > tr ").live('click', function(e) {
            var TRID = $(this).attr("id");
            var $target = $(e.target);

            if ($target.is('#btnEdit')) {
                $(this).find("td:first > input[value=Edit]").click(function() {
                    ResetOtherRowEdit();
                    ChangeTableCellToTextbox(TRID);
                    $(this).hide();
                    $("#tblEmployee > tbody >  tr[id=" + TRID + "] > td:first> input[value=Delete]").hide();
                    return false;
                });
            }
            else if ($target.is('#btnUpdate')) {
                $(this).find("td:first > input[value=Update]").click(function() {
                    UpdateRow(TRID);
                });
            }
            else if ($target.is('#btnCancel')) {
                 $(this).find("td:first > input[value=Cancel]").click(function() {
                     CancelEdit(TRID);
                });
            }                
            else if ($target.is('#btnDelete')) {
                $(this).find("td:first > input[value=Delete]").click(function() {
                    DeleteRow(TRID);
                });
            }
        });
    });

HTML коды выглядят так:

<ItemTemplate>
  <tr id='<%# Eval("ContactID") %>'>
        <td width="10%">                       
            <input type="button" value="Edit" id="btnEdit"/>
            <input type="button" value="Delete" id="btnDelete"/>
            <input type="button" value="Update" style="display:none" id="btnUpdate" />
            <input type="button" value="Cancel" style="display:none" id="btnCancel"/>
        </td>
        <td width="10%" align="center"><%# Eval("ContactID")%></td>
        <td width="20%" align="center"><%# Eval("Title")%></td>
        <td width="20%" align="center"><%# Eval("MiddleName")%></td>
        <td width="20%" align="center"><%# Eval("LastName")%></td>
        <td width="20%" align="center"><%# Eval("EmailAddress")%></td>
   </tr>   
</ItemTemplate>

Answer 1

Вот тот же скрипт с php http://www.amitpatil.me/add-edit-delete-rows-dynamically-using-jquery-php/

    // Add new record
$(document).on("click","."+editbutton,function(){
    var id = $(this).attr("id");
    if(id && editing == 0 && tdediting == 0){
        // hide editing row, for the time being
        $("."+table+" tr:last-child").fadeOut("fast");

        var html;
        html += "<td>"+$("."+table+" tr[id="+id+"] td:first-child").html()+"</td>";
        for(i=0;i<columns.length;i++){
            // fetch value inside the TD and place as VALUE in input field
            var val = $(document).find("."+table+" tr[id="+id+"] td[class='"+columns[i]+"']").html();
            input = createInput(i,val);
            html +='<td>'+input+'</td>';
        }
        html += '<td><a href="javascript:;" id="'+id+'" class="'+updatebutton+'"><img src="'+updateImage+'"></a> <a href="javascript:;" id="'+id+'" class="'+cancelbutton+'"><img src="'+cancelImage+'"></a></td>';

        // Before replacing the TR contents, make a copy so when user clicks on 
        trcopy = $("."+table+" tr[id="+id+"]").html();
        $("."+table+" tr[id="+id+"]").html(html);   

        // set editing flag
        editing = 1;
    }
});

Answer 2

Вы можете воспользоваться обходом DOM и .live(), чтобы сделать эту работу. Добавьте слушателя, используя .live() к строкам таблицы. Внутри этого метода определите, какой элемент был нажат (e.currentTarget). Вы можете использовать простое условие, чтобы проверить, была ли кнопка реагировать. Затем используйте обход DOM, чтобы записать то, что вы хотите, чтобы произошло. Например, если e.currentTarget - кнопка удаления, вы можете использовать $(this).closest('tr').remove(); для удаления строки. Если вам нужно взаимодействовать с данными через ajax, сделайте так, чтобы ваша функция ajax поддерживала передачу любого необходимого вам значения (id) для выполнения удаления. Чтобы получить идентификатор, вам нужно получить его из вызова ajax и поместить его где-то внутри DOM, чтобы вы могли получить его, когда вам это нужно. Вы всегда можете добавить атрибут title, когда генерируется tr.