javascript - jQuery click works only once - Stack Overflow

admin管理员组

文章数量:1312694

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=".1.1/jquery.min.js"></script>
<div class="t-testbody">
  <div class="circleClass"></div>
  <button id="clickMe">Button</button>
</div>

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="t-testbody">
  <div class="circleClass"></div>
  <button id="clickMe">Button</button>
</div>

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jun 19, 2015 at 21:32 Felix Kling 817k181181 gold badges1.1k1.1k silver badges1.2k1.2k bronze badges asked Jun 19, 2015 at 21:29 kushtrimhkushtrimh 91622 gold badges1414 silver badges3333 bronze badges 2

• 1 Your observation is wrong (but understandable): the event handler is executed every time you click the button. This at least you could have easily found out on your own (e.g. by adding a breakpoint inside the handler). The issue is that you are trying to append the same element over and over again. If you append an element that is already in the document, it is removed from its current position and inserted into the new one. In your case that is the same position and that's why you don't see any change. – Felix Kling Commented Jun 19, 2015 at 21:36
• I understand it now ,that was really well explained thank you so much. – kushtrimh Commented Jun 19, 2015 at 21:40

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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

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.

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./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/vikashvverma/ou52j2xn/

本文标签： javascriptjQuery click works only onceStack Overflow