blur event doesn't fire for new table cell added by jquery

Question

I have created a jsfiddle to demonstrate the problem https://jsfiddle.net/f4edp57b/16/

Basically the blur event runs on clicking the table cell, but if I clear the table and repopulate using jquery the blur event doesnt run any more (code below - also see jsffiddle). Any ideas how I can get the event to fire even after the JS has rewritten the table?

HTML >>>

<table id="tasksTable">
  <tr>
    <td class="taskQuantityCol" contenteditable="true">Blurred does Run</td>
  </tr>
</table>

<button id="refreshButton">
  Refresh
</button>

JAVASCRIPT >>>

$(document).ready(function () {

    $('.taskQuantityCol').blur(function() {
        console.log("blurred");
    });

  $('#refreshButton').click(function() {
    $("#tasksTable > tbody").empty();
    $('#tasksTable').append('<tr><td class="taskQuantityCol" contenteditable=\'true\'>Blurred doesnt Run</td>');
  });
});