Как повесить два обработчика click по разным элементам в моем коде?

Question

[User .]

Добрый день,
Есть игра в крестики нолики написанная мной c использованием библиотеки jquery, в которой есть обработчик click по 9 div который прекрасно работает, требуется добавить второй обработчик на кнопку для очистки результатов игры, я попытался это реализовать но в результате ничего не работает, скорее не совсем верно еще понят синтаксис в jquery.

var $counter=1;
var $res= ["2","2","2","2","2","2","2","2","2"];

$squares.forEach(function ($square, index) {

    //ПЕРВЫЙ ОБРАБОТЧИК ПО МОИМ 9 DIV КОНТЕЙНЕРАМ
    $square.addEventListener('click', function () {
        var $innerSquare = $square.querySelector('span.inner-square');

        if($counter != "win") {
            if ($counter && $innerSquare.className == 'inner-square') {
                $innerSquare.classList.add('inner-square-circle');
                $counter = 0;
                $('#tour').text('Tour de ' + $('#player-1').val());
                ScoreCheck();
            } else {
                if ($innerSquare.className == 'inner-square') {
                    $innerSquare.classList.add('inner-square-cross');
                    $counter = 1;
                    $('#tour').text('Tour de ' + $('#player-2').val());
                    ScoreCheck();
                }
            }
        }
                  function ScoreCheck() {
                      for (i = 0; i < $(".inner-square").length; i++) {
                           if( $('.inner-square')[i].className == 'inner-square inner-square-circle'){
                               $res[i]='0';
                           }
                          if( $('.inner-square')[i].className == 'inner-square inner-square-cross'){
                              $res[i]='1';
                          }
                      }
                         console.log($res);

                      if( ($res[0] == '0' && $res[1] == '0' && $res[2] == '0') ||
                          ($res[3] == '0' && $res[4] == '0' && $res[5] == '0') ||
                          ($res[6] == '0' && $res[7] == '0' && $res[8] == '0') ||
                          ($res[0] == '0' && $res[3] == '0' && $res[6] == '0') ||
                          ($res[1] == '0' && $res[4] == '0' && $res[7] == '0') ||
                          ($res[2] == '0' && $res[5] == '0' && $res[8] == '0') ||
                          ($res[0] == '0' && $res[4] == '0' && $res[8] == '0') ||
                          ($res[2] == '0' && $res[4] == '0' && $res[6] == '0')) {
                          console.log("Gamer circle WIN");
                          $('#tour').text($('#player-1').val() + " a gagne" );
                          $counter="win";
                      }

                      if( ($res[0] == '1' && $res[1] == '1' && $res[2] == '1') ||
                          ($res[3] == '1' && $res[4] == '1' && $res[5] == '1') ||
                          ($res[6] == '1' && $res[7] == '1' && $res[8] == '1') ||
                          ($res[0] == '1' && $res[3] == '1' && $res[6] == '1') ||
                          ($res[1] == '1' && $res[4] == '1' && $res[7] == '1') ||
                          ($res[2] == '1' && $res[5] == '1' && $res[8] == '1') ||
                          ($res[0] == '1' && $res[4] == '1' && $res[8] == '1') ||
                          ($res[2] == '1' && $res[4] == '1' && $res[6] == '1')) {
                          console.log("Gamer cross WIN");
                          $('#tour').text($('#player-2').val() + " a gagne" );
                          $counter="win";
                          }

                    }

    });

    //ВТОРОЙ ОБРАБОТЧИК ДЛЯ МОЕЙ КНОПКИ С КЛАССОМ .btn btn-primary btn-raised
    $(".btn btn-primary btn-raised").bind('click', function() {
        function Clean() {
            for (i = 0; i < $(".inner-square").length; i++) {
                $('.inner-square')[i].className = 'inner-square';
            }
        }
    });



});

Ниже ссылка на архив с проектом.
https://my-files.ru/fchccx

Comments

[Ankhena]

$(".btn btn-primary btn-raised")
явно неправильный селектор
во-первых, не хватает точек, во-вторых, вряд ли у вас кнопка в кнопке в кнопке
вероятнее всего достаточно $(".btn-raised")

[User .]

Ankhena,
Спасибо
подскажите как заменить к примеру эту часть на чистый JS

function ScoreCheck() {
                      for (i = 0; i < $(".inner-square").length; i++) {
                           if( $('.inner-square')[i].className == 'inner-square inner-square-circle'){
                               $res[i]='0';
                           }
                          if( $('.inner-square')[i].className == 'inner-square inner-square-cross'){
                              $res[i]='1';
                          }
                      }

[Ankhena]

JavaUser Spring, Начать вот отсюда https://learn.javascript.ru/searching-elements-dom

Answer 1

[nvdfxx]

$(".btn btn-primary btn-raised").on('click', function() {     
            for (i = 0; i < $(".inner-square").length; i++) {
                $('.inner-square')[i].className = 'inner-square';
            }
    });