jQuery 函数不适用于 sweetAlerts 提示

Question

我正在创建一个 jQuery 程序，允许用户输入数字 1 - 128，输入的数字动态创建一个网格，其中包含与用户输入的数字相等的正方形（例如，12 将创建 12 列和行）。

我选择使用 sweetAlerts 而不是常规提示来询问用户输入。当用户输入一个数值时，网格是动态创建的，但我的 colorRandomizer() 函数不再起作用。

colorRandomizer();当用户将鼠标悬停在方块上时，随机化网格方块的背景颜色。当我使用常规提示时，colorRandomizer() 函数可以完美运行，但是使用 sweetAlerts 时会出现网格，但我的 colorRandomizer() 不起作用。

我已将可能出现问题的代码放在下面。

调用触发按钮：

//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();
    });

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 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

这是构建网格/正方形的函数，这个函数有效，但也许我没仔细看导致问题的原因：

// 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

Answer 1

可能 swal() 是异步的，这意味着 colorRandomizer() 在 test() returns 之前执行。由于 test() 尚未将框放入 DOM 中，因此随机化器找不到要附加的元素。

尝试将 colorRandomizer 从事件处理程序移至 test()。

//random option button click function
$('#option-random').on('click', function () {
    //calls swal (sweetAlert)
    test();
});


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) {
            // build the grid-table
            buildGrid(squares);
            // give squares random colors on hover
            colorRandomizer();

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

jQuery 函数不适用于 sweetAlerts 提示

jQuery function not working with sweetAlerts prompt

jquery

if-statement

input

function

sweetalert