jQuery click works only once

Question

I want to create a circle everytime I click the button but the once I click it, it creates a circle but when i click it again nothing happen.

 $(document).ready(function() { var circle = $("<div class='circleClass'></div>"); $(".t-testbody").on("click", "#clickMe", function() { $(".t-testbody").append(circle); }); }); 

 .t-testbody { margin-top: 100px; margin-left: 50px; } .circleClass { width: 50px; height: 50px; border-radius: 100%; background-color: blue; display: inline-block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="t-testbody"> <div class="circleClass"></div> <button id="clickMe">Button</button> </div> 

Answer 1

Currently you have created the element and appended it to the div. so second append statement has not effect as the element already exist in the div.

Instead of element use HTML string

var circle = "<div class='circleClass'></div>";
$(".t-testbody").on("click", "#clickMe", function () {
    $(".t-testbody").append(circle);
});

DEMO

---

You can use .clone()

var circle = $("<div class='circleClass'></div>");
$(".t-testbody").on("click", "#clickMe", function () {
    $(".t-testbody").append(circle.clone());
});

DEMO

Answer 2

You are defining your HTML element only once, so instead of this

$(document).ready(function() {
  var circle = $("<div class='circleClass'></div>"); // Move this into event handler callback
  $(".t-testbody").on("click", "#clickMe", function() {
    $(".t-testbody").append(circle);
  });
});

Do this:

$(document).ready(function() {
  $(".t-testbody").on("click", "#clickMe", function() {
    var circle = $("<div class='circleClass'></div>"); // Move this here
    $(".t-testbody").append(circle);
  });
});

What's happening is that jQuery creates the HTML element, then on click it moves that element to the div. When you click it again, it moves that same element into where it just was, giving the illusion that it did nothing, but it just moved it into the position it already was.

When you move the variable declaration into the callback, it will generate a new html element every time you click that element, therefore jQuery will be appending a newly defined element to the div.

Answer 3

circle holds the reference of element being appended. So it has no difference after first click.

You can create circle inside the callback function like this :

 $(document).ready(function(){ $(".t-testbody").on("click","#clickMe",function(){ var circle = $("<div class='circleClass'></div>"); $(".t-testbody").append(circle); }); }); 

 .t-testbody { margin-top: 100px; margin-left: 50px; } .circleClass { width: 50px; height: 50px; border-radius: 100%; background-color: blue; display: inline-block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="t-testbody"> <div class="circleClass"></div> <button id="clickMe">Button</button> </div> 

Demo : http://jsfiddle.net/vikashvverma/ou52j2xn/