After dynamically appending HTML table blur event fails

Question

I have an HTML table with an id of custom_report_announcements_table that I dynamically add table data to via jQuery after an AJAX call completes. That part is working, the AJAX call returns the announcementId and I insert that into the table and when I view the page source the table looks correct. The problem is that I want to then setup an event that triggers on blur for the new table data after it's been added which is not working. A user should be able to edit the content of the newly added table data which should trigger the blur event but currently nothing happens.

report.html.erb - There is an id of custom_report_announcements_table where the new table data is added.

   <table id="announcements_section" style="margin-bottom: 30px; width: 100%; display: none;">
      <tr>
        <td width="100%">
          <table style="width: 100%;">
            <tr>
              <td valign="middle" style="word-break: keep-all; word-wrap: break-word; padding-left: 10px;">
                <strong><span>Announcements</span></strong>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td width="100%">
          <table border="0" cellpadding="3" id="custom_report_announcements_table" style="word-break: keep-all; word-wrap: break-word">
            <tbody style="padding: 10px; border-width: 0;">
              <tr style="color: #666;">
                <th>Title</th>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </table>

reports.js

After the AJAX call the table is then appended with a new row. The table data has an id of custom_report_announcements_title that I would like to use to trigger on blur. The has contenteditable set to true so that an inline edit can take place, when the user is done editing the blur event should trigger.

$.ajax({
  type: "POST",
  contentType: "application/json",
  url: "/custom_report_announcements.json",
  data: json
}).then(function (response) {
  console.log(response.data.custom_report_announcement_id)
  // return the announcement id then insert it into the html
  if (response.data.custom_report_announcement_id) {
    var announcementId = response.data.custom_report_announcement_id;

    var rowCount = $('#custom_report_announcements_table tr').length;
    if (rowCount == 1) {
      $("#announcements_section").css("display", "");
    }

    $("#announcements_section").removeClass('hidden');

    $('#custom_report_announcements_table > tbody:last-child').append('<tr><td id="custom_report_announcements_title" contenteditable="true" style="" announcement-id="' + announcementId + '">' + customReportAnnouncement.title  + '</td><tr> <tr><td>[message here]</td></tr>');

  }
});  

I've tried this to trigger the blur but nothing happens.

   $("#custom_report_announcements_title").on("blur", "td", function() {
      console.log('inside custom_report_announcements_title function.......');
    });

and this...

$("#custom_report_announcements_title").blur(function () {
  console.log('inside custom_report_announcements_title function.......');
});

UPDATE

@Rory thanks for pointing me in the right direction, works with the below.

 $('#custom_report_announcements_table').on('blur', '#custom_report_announcements_title', function () {
  console.log('inside custom_report_announcements_title function.......');    
 });