为什么在按下其他按钮后,jQuery中的“单击”功能不起作用?[副本]

$(function() {
  
  //this function is drawing circles
  var makingCircles = function(numberOfStars) {
    $("#rating-container").empty();
    for (let i = 0; i < numberOfStars; i++)
      $('<div class="rating-circle"></div>').appendTo('#rating-container');
  }

  var chosenGrade = null;

  var numberOfStars = $("#rating-container").attr("max-value");

  makingCircles(numberOfStars); // this is for initial drawing of circles

  $("#update-max-value").on("click", function() {
    numberOfStars = $("#max-value").val();
    makingCircles(numberOfStars);
  });


  $(".rating-circle").click( // this function is for rating
    function() {
      chosenGrade = $(this);
      chosenGrade.addClass("rating-chosen");
      chosenGrade.prevAll().addClass("rating-chosen");
    });
});

body {
  font-family: Verdana;
}

h1,
h2,
h3 {
  color: darkblue;
}

.rating-circle {
  height: 2em;
  width: 2em;
  border: .1em solid black;
  border-radius: 1.1em;
  display: inline-block;
  margin: 0.3em;
  padding: 0.1em;
}

.rating-hover {
  background-color: yellow;
}

.rating-chosen {
  background-color: green;
}

<h2>Finding elements using jQuery</h2>
<div>This session is about identifying elements using jQuery methods and selectors.</div>

<h3>Rate this session</h3>
<div id="rating-container" max-value="5">
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <label for="max-value">Enter max value:</label>
  <input type="text" id="max-value" />
  <button type="button" id="update-max-value">Update max value</button>
</div>