javascript - jQuery 点击只工作一次

Question

每次单击按钮时我都想创建一个圆圈，但是一旦我单击它，它就会创建一个圆圈，但是当我再次单击它时什么也没有发生。

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

当前您已经创建了元素并将其附加到 div。所以第二个附加语句没有效果，因为该元素已经存在于 div 中。

使用 HTML 字符串代替元素

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

DEMO

---

你可以使用.clone()

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

DEMO