Why is this event handler not working?

Why is this event handler not working?

I'm trying to write a script that creates a grid of squares based on user input and then has those squares change colour on mouseover, like some kind of really low res Etch-A-Sketch. Everything is working properly except for the colour changing part. Here's my code (the class 'written' just changes an element's background colour to black):

  1. var newLine = "<div class='line'></div>";
  2. var newTile = "<div class='tile'></div>";
  3. var createLine = function(n) {
  4.     $('#container').append(newLine);
  5.    
  6.     for (var count=1; count<n+1; count++) {
  7.         $('.line').last().append(newTile);
  8.     }
  9. }
  10. var createGrid = function(n,m) {
  11.     for (var count=1; count<m+1; count++) {
  12.         createLine(n);
  13.     }
  14. }
  15. var userGrid = function() {
  16.     $('#container').empty();
  17.    
  18.     var width = +prompt('Enter grid width:');
  19.     var height = +prompt('Enter grid height:');
  20.    
  21.     createGrid(width, height);
  22. }
  23. var colour = function() {
  24.     $(this).addClass('written');
  25. }
  26. $(document).ready(function() {
  27.     $('#new-grid').on('click', userGrid);
  28.     $('.tile').on('mouseenter', colour);
  29. });

When I pass the last event to elements that were already on the HTML file and not generated by jQuery, it works exactly as expected. Any help?