[英]jQuery click works only once
我想在每次單擊按鈕時創建一個圓圈,但是一旦我點擊它,它就會創建一個圓圈,但是當我再次點擊它時,沒有任何事情發生。
$(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。 所以第二個附加語句沒有效果,因為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());
});
您只定義了一次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。
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.