jQuery单击仅工作一次

kushtrimh 发表于 Dev

库什特里姆

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

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

萨帕尔

当前，您已经创建了元素并将其附加到div。因此，第二个append语句无效，因为div中已经存在该元素。

代替元素使用HTML字符串

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

演示

您可以使用 .clone()

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

演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。