Adding onclick-listener after appending a new div

Question

So I'm appending circles to an arena which is randomized.

The problem I am having is that once the circle is appended the onclick does not work on the circle.

This is what I've tried:

manyBalls = setInterval(function() {
    $("<div class='circle-gm-2'></div>").appendTo(".arena-2").css({
      backgroundColor: circleColor,
      width:(circleRange).val(),
      height:(circleRange).val(),
      //Here comes the random magic position of the circle
      marginLeft: Math.floor(Math.random() * arenaWidth),
      marginTop: Math.floor(Math.random() * arenaHeight)
    });
  }, 300,function(){
    $(this).on("click", function(e){
      //When the user clicks on the circle inside the arena shit will happen
      //Stopping the Propagation because we are counting misses if the user presses the arena and the circle is a child of it...
      e.stopPropagation();
      hits++;
      //Counting how many hits
      $(".totalhits").text(hits);
      //Removing the circle
      $(this).remove();
    });
  });

Also this does not work:

 $(".circle-gm-2").on("click", function(e){
  //When the user clicks on the circle inside the arena shit will happen
  //Stopping the Propagation because we are counting misses if the user presses the arena and the circle is a child of it...
  e.stopPropagation();
  hits++;
  //Counting how many hits
  $(".totalhits").text(hits);
  //Removing the circle
  $(this).remove();
});

Because it will add an eventlistener on all the ".circle-gm-2" showing each time.

How do I make it so ONLY the current appended circle to the arena, is added an eventlistener.

Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — icecub, Apr 12 '20 at 01:36
@icebub No, not really. I've tried this, There will be a lot of circles on the arena and each time $(".circle-gm-2").on("click",function(){} ) runs it will be added X times on already appended circles. — Ara Malki, Apr 12 '20 at 01:42
That's because you are attaching the event handler to a class instead of giving each generated circle a unique id and using that one. You should probably just create an integer that does +1 on each generation and use that to create unique ids — icecub, Apr 12 '20 at 01:48
@icecub that's true, I've done this. But, I wanted to see if there's an easier way to do this, right after it's appended. — Ara Malki, Apr 12 '20 at 01:50
@icecub to perhaps use the $(this) selector in someway or not. — Ara Malki, Apr 12 '20 at 01:51
Well I suppose you can do it the way its done in the second answer to this question: https://stackoverflow.com/questions/7268993/jquery-create-element-fires-onclick-event — icecub, Apr 12 '20 at 02:00
@icecub Using numeric-indexed IDs is quite a code smell. Something should only have an ID if it's *absolutely unique* in the document. Here, rather than creating an ID just to select the element again, it'd be better to either chain `.on`, like OP does below, or to save a reference to the created element so `.on` can be called on it later. — CertainPerformance, Apr 13 '20 at 08:19

score 0 · Answer 1 · answered Apr 12 '20 at 03:31

Try this:

$(document).on("click", ".circle-gm-2", function(e){
  //When the user clicks on the circle inside the arena shit will happen
  //Stopping the Propagation because we are counting misses if the user presses the arena and the circle is a child of it...
  e.stopPropagation();
  hits++;
  //Counting how many hits
  $(".totalhits").text(hits);
  //Removing the circle
  $(this).remove();
});

Hope it helps.

score 0 · Accepted Answer · answered Apr 12 '20 at 11:08

I've figured it out.

Forgot that with jQuery, you can chain together actions/methods.So the easiest way to do this would be:

//Appending the circle to the arena
  manyBalls = setInterval(function() {
    $("<div class='circle-gm-2'></div>").on("click",function(e){
      //When the user clicks on the circle inside the arena shit will happen
      //Stopping the Propagation because we are counting misses if the user presses the arena and the circle is a child of it...
      e.stopPropagation();
      hits++;
      //Counting how many hits
      $(".totalhits").text(hits);
      //Removing the circle
      $(this).remove();
    }).appendTo(".arena-2").css({
      backgroundColor: circleColor,
      width:(circleRange).val(),
      height:(circleRange).val(),
      //Here comes the random magic position of the circle
      marginLeft: Math.floor(Math.random() * arenaWidth),
      marginTop: Math.floor(Math.random() * arenaHeight)
    }).animate({opacity:0}, 1500, function() {
      $(this).remove();
      miss++;
    });
  }, 500);

Before appending the newly created div you add a listener to it, then append it.

Adding onclick-listener after appending a new div

2 Answers2