jQuery removeClass и addClass

Question

Я работаю над сайтом для игры в игру на доске переменного размера.Я создаю его в цикле for, который работает так, как я хочу, за исключением изменения и удаления класса в прослушивателе щелчков.Что должно произойти, так это то, что класс «пустой» должен быть удален, затем добавлен «черный» или «белый», а затем будет применен соответствующий CSS.Я добавил операторы console.log () и получаю то, что ожидаю, но класс остается прежним (addClass и removeClass оба ничего не делают).Я добавил возвращаемое значение false, потому что увидел предложение по другому вопросу, но, похоже, ничего не помогло.Что мне не хватает?

for(var i = 0; i < dim; i++) { // x
  for(var j = 0; j < dim; j++) { // y
    board.append('<circle id="'+ id +'" class="empty" cx="'+ (start+gap*j) +'" cy="'+ (start+gap*i) +'" r="'+ (radius) +'"/>');

    $(document).on('click', '#'+id, function() {
      console.log("clicked with color " + color);
      console.log(this);
      $(this).removeClass("empty");
      $(this).addClass(color); // I also have tried this with just "white" or "black" instead of a variable
      console.log(this);
      return false; 
    });

    id++;
  }
}

Что регистрируется, когда я нажимаю на кружок с id = 0:

<circle id="0" class="empty" cx="8" cy="8" r="4.75">
<circle id="0" class="empty" cx="8" cy="8" r="4.75">

Вот соответствующий CSS:

circle.empty {
  stroke: none;
  fill-opacity: 0;
}

circle.white {
  stroke: black;
  fill: white;
  fill-opacity: 1;
}

circle.black {
  stroke: black;
  fill: black;
  fill-opacity: 1;
}

Answer 1

Мой английский не очень хорош.

Вы не можете написать ту же самую "id" attr на круге.Он не работает, когда вы нажимаете на кружок.

Затем измените его следующим образом.

$(document).on('click', '.'+id, function() {
   // some logic here
});

Answer 2

Не используйте функцию click внутри цикла for и вместо ID используйте общий класс .circle, как показано ниже,

$(document).on('click', '.circle', function() {
  $(this).removeClass("empty");
  $(this).addClass('red');
  console.log(`${$(this).attr('id')} - ${$(this).attr('class')}`);
});

for(var j = 0; j < 5; j++) {
   $('#wrapper').append(`<div id="${j}" class="circle empty">Click Me</div>`);    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper"></div>