jQuery function not working with sweetAlerts prompt

I'm creating a jQuery program that allows users to enter a number 1 - 128, the number entered dynamically creates a grid containing squares equaling the number entered by the user (e.g 12 will create 12 columns and rows).

I have chosen to use sweetAlerts instead of regular prompt to ask the user for input. When a user enters a number value the grid is dynamically created, but my colorRandomizer() function is no longer working.

The colorRandomizer(); randomizes the background color of the grid squares when the user hovers over the squares. When I use a regular prompt the colorRandomizer() function works perfectly, but with sweetAlerts the grid appears but I'm colorRandomizer() doesn't work.

I've placed the code where the issue is possibly occurring below.

call to trigger button:

//random option button click function
    $('#option-random').on('click', function () {

        //calls swal (sweetAlert)
        test();

        // calls colorRandomizer function to give squares random colors on hover
        colorRandomizer();
    });

function with sweetAlerts:

function test() {
        swal({
            title: "Hello!",
            text: "Enter a number between 1-128 for squares in your grid",
            type: "input",
            showCancelButton: true,
            showConfirmButton: true,
            closeOnConfirm: false,
            animation: "slide-from-top",
            inputPlaceholder: "e.g 12"
        }, function (squares) {
            if (squares >= 1 || squares <= 128) {

        // calls build function to build the grid-table
                buildGrid(squares);

            } else {
                swal("Oops! You didn't enter a number between 1-128");
            }
        });
    }

function for random background color (this is the function that stop working):

function colorRandomizer() {
        $('.grid_squares').on('mouseover', function () {
            var color1, color2, color3;
            color1 = (Math.floor(Math.random() * 256));
            color2 = (Math.floor(Math.random() * 256));
            color3 = (Math.floor(Math.random() * 256));

            $(this).css({
                "background-color": "rgb(" + color1 + "," + color2 + "," + color3 + ")"
            });
        });
    }; //colorRandomizer

This is the function that build out the grid / squares, this function works but maybe I'm over looking something that is causing the issue:

// create grid-table
function buildGrid(squares) {

    // assigns square_size to the width of the grid-table and divides it by the squares input from user and - 2 for the squares border size
    var square_size = $('#grid-table').width() / squares - 2;

    // while counter "i" is less or equal to squares user input create div with class .gride_squares and append newly created div to grid-table
    for (var i = 1; i <= squares; i++) {
        for (var j = 1; j <= squares; j++) {
            $('#grid-table').append('<div class="grid_squares"></div>');
        }
        // while counter "j" is less or equal to squares user input create div with class .rows and append newly created div to grid-table; .rows is used to clear the floated .grid_squares in my external css
        $('#grid-table').append('<div class="rows"></div>');
    }
    // assigns width and height css values to .grid_squares
    $('.grid_squares').css({
        'width': square_size,
        'height': square_size
    });
}; // buildGrid