title: Buttons Not Working When Adding Table Rows
body: <p>I have a table with a column that has 2 buttons, edit and deactivate. Both function perfectly. However, I also have a button outside of the table that adds a row to the table. On all added rows, neither my edit nor deactivate button work at all. How do I fix this?</p>
  
  <p>HTML/PHP:</p>
  
  <pre><code>&lt;table id="html_master"&gt;
  &lt;thead&gt;
      &lt;tr&gt;
      &lt;td&gt;ID&lt;/td&gt;
      &lt;td&gt;Vendor&lt;/td&gt;
      &lt;td&gt;Buyer ID&lt;/td&gt;
      &lt;td&gt;POC Name&lt;/td&gt;
      &lt;td&gt;POC Email&lt;/td&gt;
      &lt;td&gt;POC Phone&lt;/td&gt;
      &lt;td&gt;Edit/Delete&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
  
  &lt;?php
      foreach ($dbh-&gt;query($sql) as $rows){
      ?&gt;
      &lt;tr&gt;
          &lt;td class="mr_id" contenteditable="false"&gt;&lt;?php echo intval ($rows['MR_ID'])?&gt;&lt;/td&gt;
          &lt;td class="mr_name" contenteditable="false"&gt;&lt;?php echo $rows['MR_Name']?&gt;&lt;/td&gt;
          &lt;td class="buyer_id" contenteditable="false"&gt;&lt;?php echo $rows['Buyer_ID']?&gt;&lt;/td&gt;
          &lt;td class="poc_n" contenteditable="false"&gt;&lt;?php echo $rows['MR_POC_N']?&gt;&lt;/td&gt;     
          &lt;td class="poc_e" contenteditable="false"&gt;&lt;?php echo $rows['MR_POC_E']?&gt;&lt;/td&gt;
          &lt;td class="poc_p" contenteditable="false"&gt;&lt;?php echo $rows['MR_POC_P']?&gt;&lt;/td&gt;
          &lt;td&gt;&lt;button class="edit" name="edit"&gt;Edit&lt;/button&gt;
          &lt;button class="deactivate" name="deactivate"&gt;Deactivate&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
   &lt;?php
    }
   ?&gt;
  &lt;/tbody&gt;
          &lt;br&gt;
          &lt;input type="button" class="add" value="Add Row" onclick="addRow('html_master')"&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>// ----- Deactivate Row -----
  
  $(document).ready(function() {
    $('.deactivate').click(function() {
      var $this = $(this);
      var $tr = $this.closest('tr');
      var action = $tr.hasClass('deactivated') ? 'activate' : 'deactivate';
  
      if (confirm('Are you sure you want to ' + action + ' this entry?')) {
        $tr.toggleClass('deactivated');
        $this.text(function(i, t) {
          return t == 'Deactivate' ? 'Activate' : 'Deactivate';
        });
      }
    })
  });
  
  // ----- Add Row -----
  
  function addRow(tableID) {
  
      var table = document.getElementById(tableID);
  
      var rowCount = table.rows.length;
      var row = table.insertRow(rowCount);
  
      var cell1 = row.insertCell(0);
      cell1.innerHTML = rowCount;
  
      var cell2 = row.insertCell(1);
      var element2 = document.createElement("input");
      element2.type = "text";
      element2.name = "txtbox[]";
      cell2.appendChild(element2);
  
      var cell3 = row.insertCell(2);
      var element3 = document.createElement("input");
      element3.type = "text";
      element3.name = "txtbox[]";
      cell3.appendChild(element3);
  
      var cell4 = row.insertCell(3);
      var element4 = document.createElement("input");
      element4.type = "text";
      element4.name = "txtbox[]";
      cell4.appendChild(element4);
  
      var cell5 = row.insertCell(4);
      var element5 = document.createElement("input");
      element5.type = "text";
      element5.name = "txtbox[]";
      cell5.appendChild(element5);
  
      var cell6 = row.insertCell(5);
      var element6 = document.createElement("input");
      element6.type = "text";
      element6.name = "txtbox[]";
      cell6.appendChild(element6);
  
      var cell7 = row.insertCell(6);
      var element7 = document.createElement("input");
      var element8 = document.createElement("input");
      element7.type = "button";
      element8.type = "button";
      element7.name="edit";
      element8.name="deactivate";
      element7.value="Edit";
      element8.value="Deactivate";
      cell7.appendChild(element7);
      cell7.appendChild(element8);
  }
  
  $(document).ready(function() {
      $('.edit').click(function() {
          var $this = $(this);
          var tds = $this.closest('tr').find('td').not('.mr_id').filter(function() {
          return $(this).find('.edit').length === 0;
      });
      if ($this.html() === 'Edit') {
          $this.html('Save');
          tds.prop('contenteditable', true);
      } else {
          var isValid = true;
          var errors = '';
          $('#myDialogBox').empty();
          tds.each(function(){
               var type = $(this).attr('class');
               var value = $(this).text();
               switch(type){
                   case "buyer_id":
                       if(!$.isNumeric(value)){
                           isValid = false;
                           errors += "Please enter a valid Buyer ID\n";
                        }
                       break;
                  case "poc_n":
                      if(value == value.match(/^[a-zA-Z\s]+$/)){
                          break;
                      }
                      else {
                          isValid = false;
                          errors += "Please enter a valid Name\n";
                      }
                      break;
                  case "poc_e":
                      if(value == value.match(/^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/)){
                          break;
                      }
                      else {
                          isValid = false;
                          errors += "Please enter a valid Email\n";
                      }
                      break;
                  case "poc_p":
                      if(value == value.match('^[0-9 ()+/-]{10,}$')){
                          break;
                      }
                      else {
                          isValid = false;
                          errors += "Please enter a valid Phone Number\n";    
                      }
                      break;
               }
          })
          if(isValid){
              $this.html('Edit');
              tds.prop('contenteditable', false);
          }else{
              alert(errors);
          }
      }
  });
  });
  </code></pre>