Функция jQuery не работает со приглашением sweetAlerts

Question

Я создаю программу jQuery, которая позволяет пользователям вводить число 1 - 128, введенное число динамически создает сетку, содержащую квадраты, равные числу, введенному пользователем (например, 12 создадут 12 столбцы и строки).

Я предпочел использовать sweetAlerts вместо обычного приглашения, чтобы попросить пользователя ввести его. Когда пользователь вводит числовое значение, сетка динамически создается, но моя функция colorRandomizer() больше не работает.

ЦветRandomizer(); рандомизирует цвет фона квадратов сетки, когда пользователь нависает над квадратами. Когда я использую регулярное приглашение, функция 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 

Это это функция, которая создает сетку/квадраты, эта функция работает, но, возможно, я уже смотрю omething, что вызывает вопрос:

// 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() возвращается. Поскольку test() еще не помещает ящики в DOM, рандомизатор не находит элемент для прикрепления.

Попробуйте переместить colorRandomizer из обработчика события для проверки().

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