Event handler binding on updated div after successful AJAX

Question

PHP populates div using result set from SQL with the following code:

<div id="products-div">
<?php
while ($row = $result->fetch_assoc()) {
   generate_category_product_div($row);
} ?>
</div>

After i update this div with the following jquery/ajax post it seems that the click event handler is missing from any div in data. It only works when i reload the page.

$(function() {
   $('.category').on('click', function() {

      var category = this.id;

      $.post('category.php', {
         category: category,
      })
      .done(function (data) {
         $('#products-div').html(data);
      });
   });
});

Any help will be much appreciated.