title: Editing and deleting a newly added table row using Jquery
body: <p>I'm adding new rows dynamically to the existing table, the first column of the table holds the Edit &amp; Delete buttons. I'm facing 2 problems with this:  </p>
  
  <ol>
  <li>Not able to Edit and Delete newly added rows, tried .live but couldn't make it work  </li>
  <li>Not able to get the record id of the newly added rows (ajax returns the record when new rows are added).</li>
  </ol>
  
  <p>Code looks like this:</p>
  
  <p>Adding new rows:</p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
       $(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) &gt;= 1) {
                               var contactID;
                               contactID = parseInt(response.d);
                               $('#tblEmployee tbody tr:first').after("&lt;tr id=" + contactID + "&gt;&lt;td&gt;&lt;input type='button' class='newContactID' value='Edit'/&gt;&amp;nbsp;&lt;input type='button' value='Delete'/&gt;&lt;/td&gt;&lt;td align=center&gt;" + contactID + "&lt;/td&gt;&lt;td align=center&gt;" + oEmployee.Title + "&lt;/td&gt;&lt;td align=center&gt;" + oEmployee.Middlename + "&lt;/td&gt;&lt;td align=center&gt;" + oEmployee.Lastname + "&lt;/td&gt;&lt;td align=center&gt;" + oEmployee.Email + "&lt;/td&gt;&lt;tr&gt;"); // 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);
           });
       });                          
  &lt;/script&gt;
  </code></pre>
  
  <p>Code for editing and deleting:</p>
  
  <pre><code>$(function() {
      $("#tblEmployee &gt; tbody &gt; tr ").each(function() {
          var TRID = $(this).attr("id");
          $(this).find("td:first &gt; input[value=Edit]").click(function() {
              ResetOtherRowEdit();
              ChangeTableCellToTextbox(TRID);
              $(this).hide();
              $("#tblEmployee &gt; tbody &gt;  tr[id=" + TRID + "] &gt; td:first&gt; input[value=Delete]").hide();
              return false;
          });
  
          $(this).find("td:first &gt; input[value=Update]").click(function() {
              UpdateRow(TRID);
          });
  
          $(this).find("td:first &gt; input[value=Delete]").click(function() {
              DeleteRow(TRID);
          });
  
          $(this).find("td:first &gt; input[value=Cancel]").click(function() {
              CancelEdit(TRID);
          });           
      });
  });
  </code></pre>
  
  <p>What is the best way to approach this? Editing and deleting of records work fine when they're pulled off the database.</p>
  
  <hr>
  
  <p><strong>Update</strong></p>
  
  <p>This is how the code looks like now, just began dabbling with Jquery a month back, still trying to get my head around it.</p>
  
  <pre><code>    $(function() {
          $("#tblEmployee &gt; tbody &gt; tr ").live('click', function(e) {
              var TRID = $(this).attr("id");
              var $target = $(e.target);
  
              if ($target.is('#btnEdit')) {
                  $(this).find("td:first &gt; input[value=Edit]").click(function() {
                      ResetOtherRowEdit();
                      ChangeTableCellToTextbox(TRID);
                      $(this).hide();
                      $("#tblEmployee &gt; tbody &gt;  tr[id=" + TRID + "] &gt; td:first&gt; input[value=Delete]").hide();
                      return false;
                  });
              }
              else if ($target.is('#btnUpdate')) {
                  $(this).find("td:first &gt; input[value=Update]").click(function() {
                      UpdateRow(TRID);
                  });
              }
              else if ($target.is('#btnCancel')) {
                   $(this).find("td:first &gt; input[value=Cancel]").click(function() {
                       CancelEdit(TRID);
                  });
              }                
              else if ($target.is('#btnDelete')) {
                  $(this).find("td:first &gt; input[value=Delete]").click(function() {
                      DeleteRow(TRID);
                  });
              }
          });
      });
  </code></pre>
  
  <p>HTML codes looks like this:</p>
  
  <pre><code>&lt;ItemTemplate&gt;
    &lt;tr id='&lt;%# Eval("ContactID") %&gt;'&gt;
          &lt;td width="10%"&gt;                       
              &lt;input type="button" value="Edit" id="btnEdit"/&gt;
              &lt;input type="button" value="Delete" id="btnDelete"/&gt;
              &lt;input type="button" value="Update" style="display:none" id="btnUpdate" /&gt;
              &lt;input type="button" value="Cancel" style="display:none" id="btnCancel"/&gt;
          &lt;/td&gt;
          &lt;td width="10%" align="center"&gt;&lt;%# Eval("ContactID")%&gt;&lt;/td&gt;
          &lt;td width="20%" align="center"&gt;&lt;%# Eval("Title")%&gt;&lt;/td&gt;
          &lt;td width="20%" align="center"&gt;&lt;%# Eval("MiddleName")%&gt;&lt;/td&gt;
          &lt;td width="20%" align="center"&gt;&lt;%# Eval("LastName")%&gt;&lt;/td&gt;
          &lt;td width="20%" align="center"&gt;&lt;%# Eval("EmailAddress")%&gt;&lt;/td&gt;
     &lt;/tr&gt;   
  &lt;/ItemTemplate&gt;
  </code></pre>