jQuery点击只能工作一次

我想每次点击按钮时创建一个圆，但是一旦点击它，它会创建一个圆，但是当我再次点击它时，什么都不会发生。jQuery点击只能工作一次

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

来源

2015-06-19 eustass

您的观察错误（但可以理解）：每次单击按钮时都会执行事件处理程序。至少你可以很容易地找到你自己的（例如通过在处理程序中添加断点）。问题是你试图一遍又一遍地追加*相同的*元素。如果追加一个已经在文档中的元素，它将从当前位置移除并插入到新文档中。在你的情况下，这是相同的立场，这就是为什么你没有看到任何改变。 –

我现在明白了，这真的很好解释非常感谢。 – eustass

目前已创建的元素，并将其附加到div。所以第二个append语句没有效果，因为元素已经存在于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

来源

2015-06-19 21:33:32 Satpal

您可能想要更多地了解问题所在。 –

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/

来源

2015-06-19 21:37:54 Vikash

您要定义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中。

来源

2015-06-19 21:44:00 Jeff

jQuery点击只能工作一次

回答

相关问题