I have a function that creates a grid of divs that are generated and sent to a container div when the document loads. When one hovers over the divs, they highlight (change color). I have another function that resets the grid, allowing the user to specify the size of the grid. It's supposed to remove the divs that are currently in the container div, and replace them with divs based off of the user's input. From what I can tell this is working as intended. The only thing that *isn't* working is the hover effect once the grid is reset. Any help, or at least some direction would be much appreciated. Here is my jsfiddle example: <http://jsfiddle.net/psyonix/1g9p59bx/45/>

```
var d = ("<div class='square'></div>");

function createGrid(numSquares) {
    var area = $('#g_area');
    var squareSize = Math.floor(area.innerWidth() / numSquares);
    var n = 0;
    for (var i = 0, len = (numSquares * numSquares); i < len; i++) {
        area.append(d);
    }

    $('.square').height(squareSize);
    $('.square').width(squareSize);
}

function resetGrid() {
    $(".square").remove();
}

$(document).ready(function () {
    createGrid(32);

    $('.square').hover(

    function () {
        $(this).css({
            'background-color': '#FFFFFF'
        });
    }, function () {
        $(this).css({
            'background-color': '#C8C8C8'
        });
    });
    $("#button").click(function () {
        var numSquares = prompt("Please enter the size");
        resetGrid(numSquares);
        createGrid(numSquares);
    });

});

```