我想在每次单击按钮时创建一个圆圈,但是一旦我点击它,它会创建一个圆圈,但是当我再次点击它时,没有任何事情发生。
$(document).ready(function() {
var circle = $("<div class='circleClass'></div>");
$(".t-testbody").on("click", "#clickMe", function() {
$(".t-testbody").append(circle);
});
});
&#13;
.t-testbody {
margin-top: 100px;
margin-left: 50px;
}
.circleClass {
width: 50px;
height: 50px;
border-radius: 100%;
background-color: blue;
display: inline-block;
}
&#13;
<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>
&#13;
答案 0 :(得分:4)
目前您已创建元素并将其附加到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());
});
答案 1 :(得分:2)
您只定义了一次HTML元素,而不是这个
select f.fts_date,
count(distinct f.FTS_id) as FTS_count,
count(distinct s.passportid) as SVS_count,
(count(distinct s.passportid)/count(distinct f.FTS_id)) as return_rate
from
(select passportid as FTS_id,addressid, date(signdatetime) as FTS_date from a.xxx
where date(signdatetime)>'2015-6-10' and fts="Y" and disposition="accepted") as f
left join a.xxx as s
on f.passportid=s.passportid and f.addressid=s.addressid and s.disposition="accepted" and
s.signdatetime between date_add(f.signdatetime, 1, "DAY") and date_add(f.signdatetime, 7, "DAY")
group by 1
这样做:
$(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);
});
});
发生了什么是jQuery创建HTML元素,然后点击它将该元素移动到div。当你再次点击它时,它会将同一个元素移动到它刚才的位置,给人一种错觉,它什么也没做,但它只是将它移动到它已经存在的位置。
当您将变量声明移动到回调中时,每次单击该元素时它都会生成一个新的html元素,因此jQuery会将新定义的元素附加到div。
答案 2 :(得分:1)
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>