title: How to detect new element created in HTML by jQuery?
body: <p>i'm new in jQuery and i'm wonderin how to solve this issue.  I marked the Delete  to show the link thru this code:</p>
  
  <pre><code>$('a[id^="del"]').css('border','red 1px solid');
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/YnxSF.png" alt="Initial table"></p>
  
  <p>The problem is when I added a new Activity thru this code:</p>
  
  <pre><code>function addGradebkhdr() {
  
  var formData = formToJSON();
  
      $.ajax({
        type: 'post',
        contentType: 'application/json',
        url: 'http://samle.com/api',
        dataType: "json",
        data: formData,
        success: function(data, textStatus, jqXHR){
          **addTableGradebkhdr(data);**
        },
        error: function(jqXHR, textStatus, errorThrown){
          // handle error
        }
      });
   }
  
  function addTableGradebkhdr(data) {
  
    var lr = $(".tb-gradebkhdr tbody tr:last-of-type");
    var no = parseInt($(".tb-gradebkhdr tbody tr:last-of-type td:first-of-type").text());
    var ctr = no + 1;
      var d = new Date(data.date);
      var day = d.getDate();
      var month = d.getMonth() + 1; //Months are zero based
      var year = d.getFullYear();
      var sDate = month + "/" + day + "/" + year;
  
      var row = '&lt;tr id="'+ data.id +'" &gt;&lt;td&gt;'+ ctr +'&lt;/td&gt;';
              row += '&lt;td&gt;'+ data.criteria_name +'&lt;/td&gt;';
              row += '&lt;td&gt;'+ data.rawhigh +'&lt;/td&gt;';
              row += '&lt;td&gt;'+ sDate +'&lt;/td&gt;';
              row += '&lt;td&gt;'+ data.quarter +'&lt;/td&gt;';
              row += '&lt;td&gt;'+ data.remarks +'&lt;/td&gt;';
              row += '&lt;td&gt;';
              row += '&lt;a gradebkhdrid="'+ data.id +'" id="edit-'+ data.id +'" href="#"&gt;Edit&lt;/a&gt; ';
              row += '&lt;a gradebkhdrid="'+ data.id +'" id="del-'+ data.id +'" href="#"&gt;Delete&lt;/a&gt;';
              row += '&lt;/td&gt;&lt;/tr&gt;';
          lr.after(row);
  
  
  }
  
  
  $(document).ready(function(){
  
  $("#frmBtn-grbkhdr-save").on('click',**addGradebkhdr**);
  
  $('a[id^="del"]').each(function(){
      $(this).on("click",function() {
              var gradebkhdrid = $(this).attr('gradebkhdrid');    
          deleteGradebkhdr(gradebkhdrid);
          });     
    });
  });
  </code></pre>
  
  <p>and the Table become like this:</p>
  
  <p><img src="https://i.stack.imgur.com/cb4JH.png" alt="fasd"> </p>
  
  <p>as you can see the last Delete was not detected by </p>
  
  <pre><code>$('a[id^="del"]').each(function(){
      $(this).on("click",function() {            
          var gradebkhdrid = $(this).attr('gradebkhdrid');
          deleteGradebkhdr(gradebkhdrid);
       });
  });
  </code></pre>
  
  <p>The red border was not a part of the table. I used it to track the event/error trapping. As you can see in the 1st image,the page was loaded and all the Delete link was marked red. It means the Delete link all work. </p>
  
  <p>But when I added a new Activity via jQuery ajax function to submit the form and created a Table Row and its element inside including the Delete button. The added delete link was not working and the red line I created was not applied also an as you can see un the 2nd image. </p>