title: Event listener for appended html elements not working
body: <p>The event listener for my appended html elements are not working. What this button does is that it will open up a popup that prompts user for delete confirmation. </p>
  
  <p>I'm doing the view page this way instead of the normal html and jsp code way because I want to make use of ajax and jquery for pagination. The event listener works properly back then. I've omitted out the code because its not very relevant.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>viewAnnouncements.jsp</p>
  
  <pre><code>&lt;table&gt;
  &lt;thead&gt;
      &lt;!--Sets the table headings--&gt;
  &lt;/thead&gt;
  &lt;script type="text/javascript"&gt;
      $('document').ready(function() {
          $.get("processPagination.jsp?requestType=getRecords, function(data) {
              var JSONData = JSON.parse(data);
              for(i=0; i&lt;recordsToFetch; i++){
              const record = JSONData.results[i].split(",");
              const title = record[0];
              $("tbody").append("
              &lt;tr&gt;
                  &lt;td&gt;&lt;a&gt;"+title+"&lt;/a&gt;&lt;/td&gt;
                  &lt;td&gt;
                      &lt;p data-placement='top' data-toggle='tooltip' title='Delete'&gt;
                      &lt;button class='btn btn-danger btn-xs announcement-delete-button' data-title='Delete' data-id='"+index+"'&gt;
                      &lt;i class='far fa-trash-alt' &gt;&lt;/i&gt;&lt;/button&gt;&lt;/p&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;");
              }
      });
  &lt;/script&gt;
  &lt;tbody&gt;
      &lt;!--Rows are appended here--&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>main.js</p>
  
  <pre><code>$('document').ready(function() {
      $('.announcement-delete-button').on('click', function() {
          const id =  $(this).data().id;
          $('.grey-screen').show();
          $('#announcement-delete').fadeIn();
          $('.announcement-delete-yes')
              .attr("onclick", 
              "window.location.href='/testweb/announcementController?Submit=delete
          );
      });
  });
  </code></pre>
  
  <p>EDIT: I have already tried binding the event listener to tbody and calling for the child selector 'announcement-delete-button' and it still doesn't work.</p>