jQuery click只工作一次

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

Answer 2

您只定义了一次HTML元素，因此不是这样

$(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);
  });
});

做这个：

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

发生了什么是jQuery创建HTML元素，然后点击它将该元素移动到div。 当你再次点击它时，它会将相同的元素移动到它刚才的位置，给人一种错觉，它什么也没做，但它只是将它移动到它已经存在的位置。

当您将变量声明移动到回调中时，每次单击该元素时它都会生成一个新的html元素，因此jQuery会将新定义的元素附加到div。

Answer 3

circle保存附加元素的引用。 所以首次点击后没有区别。

你可以在回调函数中创建一个圆圈，如下所示：

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

演示： http ： //jsfiddle.net/vikashvverma/ou52j2xn/