Why 'click' function is not working in jQuery after other button was pressed?

Question

I need to make grading system in jQuery ( I click on one circle and than that and previous circles become green).

If I click on the empty circle, that circle and previous ones become green.

If I write number of circles in input box and than click on "Update max value" button, than I get the desired number of circles, but if I click afterwards on one of those circles, they don't become green, even though they have a class rating-circle.

Why is that happening?

I put my code below.

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

I've created a fiddle that fixes your code by using event delegation. https://jsfiddle.net/9z5vdr8w/ It also fixes a possible bug when user wants to re-rate leaving less rating (e.g. chose 5 circles and wants to change it to 4) — Paker, Sep 21 '17 at 13:56

score 3 · Accepted Answer · answered Sep 21 '17 at 13:48

Use event delegation:

$("#rating-container").on("click", ".rating-circle",

Instead of

$(".rating-circle").click(

That's the way to go for event binding on newly / dynamically created HTML elements, and by dynamic i'm talking about HTML elements created with javascript.

score 0 · Answer 2 · answered Sep 21 '17 at 13:48

0

There should be instead of

$(".rating-circle").click(

this:

$("#rating-container").on("click",".rating-circle",

Because otherwise you will have to bind click event handler each time you refill the container

answered Sep 21 '17 at 13:48

Maxim

243
3
18

Why 'click' function is not working in jQuery after other button was pressed?

2 Answers2